Issues running inside a webpack based NX monorepo React app

[nikitalepikhin]

Hello,

Could someone please help me? I’m trying to set up mirage inside an NX monorepo based React app (https://nx.dev/getting-started/react-standalone-tutorial). I’m using webpack. The problem is that the createServer function fails with the following error:

TypeError cannot read the property of undefined (reading ‘prototype’).

The issue is simply reproducible. All you need to do is create a react app inside an NX monorepo - see the link above. Then call the createServer function (for instance, in main.tsx).

I’ve been trying to solve this error for a couple days now and nothing seems to help. I’m not sure if the issue is related to a faulty webpack config, TS config or something else. Note that mirage works fine when used inside a create-react-app application. I’ve tried ejecting it and comparing configs with the one in my app got but to no avail.

Any help will be highly appreciated! Thank you.

[nikitalepikhin]

Found a solution:

As expected the issue was related to an erroneous webpack config. Turns out, webpack loads the correct file depending on the target specified. The NX premade config specifies entry points in the following order: [browser, main, module]. However, the default order is [browser, module, main] when the selected target is web. For some reason, the main entry point did not work and so switching the order of entry points fixed the issue for us. The correct entry point therefore comes under the “module” ID.

[allyssonsantos]

Hi @nikitalepikhin, thanks for sharing that! I'm facing the same problem and need help understanding what you have done to make it work. Could you send an example of how you have done that?

[nikitalepikhin]

Hi @allyssonsantos, you have to specify the resolve.mainFields option inside your webpack config. Please refer to Webpack documentation here.

Simply change this entry to [browser, module, main] and it should work.