React app not working due to missing polyfills (can't resolve module in package)

[AlikRakhmonov]

Current Behavior

With the following changes made in version 15.4.6:

1. feat(webpack): remove support for legacy browsers #14190
2. feat(webpack): generate React and Web apps with webpack.config.js file #14285

Nx fails when building and serving React apps.

I found the workaround here #14389 (comment) that works.

And I expected that it was fixed in this PR: #14546 , but upgrading to the fixed version didn't help.

The problem seems to be that the Webpack config returns the wrong resolve.mainFields value:

['browser', 'main', 'module']

when according to the Webpack documentation it should return:

['browser', 'module', 'main']

The same problem when working with module federations.

Expected Behavior

Serving and building React apps work as before 15.4.6

GitHub Repo

https://github.com/AlikRakhmonov/nx-example

Steps to Reproduce

1. Clone the repo
2. Install packages npm i
3. Run npx nx serve app

If you uncomment lines in webpack.config.js, it will work.

Nx Report

Node : 16.16.0
   OS   : darwin arm64
   npm  : 8.11.0
   
   nx : 15.6.3
   @nrwl/angular : Not Found
   @nrwl/cypress : 15.6.3
   @nrwl/detox : Not Found
   @nrwl/devkit : 15.6.3
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.6.3
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 15.6.3
   @nrwl/js : 15.6.3
   @nrwl/linter : 15.6.3
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 15.6.3
   @nrwl/react-native : Not Found
   @nrwl/rollup : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : Not Found
   @nrwl/web : Not Found
   @nrwl/webpack : 15.6.3
   @nrwl/workspace : 15.6.3
   @nrwl/vite : Not Found
   typescript : 4.8.4
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:

Failure Logs

ERROR in ../../node_modules/@aws-sdk/client-lex-runtime-v2/node_modules/@aws-sdk/hash-node/dist-cjs/index.js 6:17-34
Module not found: Error: Can't resolve 'crypto' in '/app/node_modules/@aws-sdk/client-lex-runtime-v2/node_modules/@aws-sdk/hash-node/dist-cjs'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
        - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "crypto": false }

Additional Information

No response

[oanacioarawaterford]

I have the same issue. Tried this workaround but now assets are not loading anymore.

module.exports = composePlugins(
  withNx(),
  withReact(),
  (config, { options, context }) => {
    config.resolve.mainFields = ['browser', 'module', 'main'];
    return config;
  }
);```

[takakobem]

I encountered the runtime bug that caused by this change.
It was fixed by changing config.resolve.mainFields to ['browser', 'module', 'main'].

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.