React build breaks after migrating to 15.5.1

Current Behavior

After we migrated to v15.5.1 (from 15.4.4), a few of our React apps started failing on builds.
There was a polyfill for node (which I couldn't find in code history, but it might have been another polyfill) that does not exist anymore.

We are using a custom webpack configuration which is using the plugin from @nrwl/react/plugins/webpack.

I assume this is caused by one of those:

Expected Behavior

Should work as it previously did.

Github Repo

No response

Steps to Reproduce

Create a repo with a React app
Install graphql-request
Use it anywhere in your code
Run a build

Nx Report

Node : 16.16.0
   OS   : darwin arm64
   yarn : 3.3.1
   
   nx : 15.5.1
   @nrwl/angular : Not Found
   @nrwl/cypress : 15.5.1
   @nrwl/detox : Not Found
   @nrwl/devkit : 15.5.1
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.5.1
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 15.5.1
   @nrwl/js : 15.5.1
   @nrwl/linter : 15.5.1
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : 15.5.1
   @nrwl/nx-cloud : 15.0.2
   @nrwl/nx-plugin : 15.5.1
   @nrwl/react : 15.5.1
   @nrwl/react-native : Not Found
   @nrwl/rollup : 15.5.1
   @nrwl/schematics : Not Found
   @nrwl/storybook : 15.5.1
   @nrwl/web : 15.5.1
   @nrwl/webpack : 15.5.1
   @nrwl/workspace : 15.5.1
   @nrwl/vite : 15.5.1
   typescript : 4.9.4
   ---------------------------------------
   Local workspace plugins:
         @island/workspace
   ---------------------------------------
   Community plugins:
         nx-stylelint: 14.0.2

Failure Logs

ERROR in ./node_modules/combined-stream/lib/combined_stream.js 2:13-37
Module not found: Error: Can't resolve 'stream' in '/Users/dan/work/apps/node_modules/combined-stream/lib'

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: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }
 @ ./node_modules/graphql-request/node_modules/form-data/lib/form_data.js 1:21-47
 @ ./node_modules/graphql-request/dist/createRequestBody.js 7:34-54
 @ ./node_modules/graphql-request/dist/index.js 178:42-72
 @ ./apps/app/src/app/api/graphql/rpa-store-client.ts 1:0-38 9:40-43
 @ ./apps/app/src/features/foo/Drawer.tsx 31:0-33:48 134:6-19
 @ ./apps/app/src/components/Drawers/DrawerList.ts 19:0-67 152:46-60
 @ ./apps/app/src/components/Drawers/Drawers.tsx 5:0-42 11:18-28
 @ ./apps/app/src/app/App.tsx 5:0-56 25:314-321
 @ ./apps/app/src/index.tsx 5:0-35 17:216-226

Additional Information

No response

Mentioning this here as potentially related?

I think it more excepted behavior because webpack removed polyfills by default in v5, same did nx team

Seems related to a change added in #14285

I'm also running into this.

Same issue on a react project. Was trying to migrate from 15.0.3 -> 15.5.2

@bdebon

@bdebon migrating to 15.4.4 works for me now.

encountered same issue when upgraded from 15.4.2 -> 15.5.2

@bdebon

@bdebon migrating to 15.4.4 works for me now.

According to my test it appeared in 15.4.6

15.5.3 Still has the same problem.

Also hitting this issue, pretty surprising for a minor bump

This should be fixed in latest version. Can you please try again with latest (15.5.3)?

Hello,
I have the sensation 15.5.3 did not fix it either.
I end up with this error while running nx serve

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: { "tty": require.resolve("tty-browserify") }'
        - install 'tty-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "tty": false }

webpack compiled with 7 errors (c73785bb661b0c18)

and here is the list of our deps

"dependencies": {
    "@auth0/auth0-react": "^1.10.1",
    "@elgorditosalsero/react-gtm-hook": "^2.6.0",
    "@nrwl/cli": "15.5.3",
    "@nrwl/cypress": "15.5.3",
    "@nrwl/devkit": "15.5.3",
    "@nrwl/eslint-plugin-nx": "15.5.3",
    "@nrwl/linter": "15.5.3",
    "@nrwl/nx-cloud": "15.0.2",
    "@nrwl/react": "15.5.3",
    "@nrwl/storybook": "15.5.3",
    "@nrwl/tao": "15.5.3",
    "@nrwl/web": "15.5.3",
    "@nrwl/workspace": "15.5.3",
    "@radix-ui/react-accordion": "^0.1.6",
    "@radix-ui/react-dialog": "^1.0.2",
    "@radix-ui/react-slider": "^1.0.0",
    "@radix-ui/react-tooltip": "^0.1.7",
    "@reduxjs/toolkit": "1.9.0",
    "@storybook/addon-essentials": "6.5.15",
    "@storybook/addon-knobs": "^6.4.0",
    "@storybook/builder-webpack5": "6.5.15",
    "@storybook/core-server": "6.5.15",
    "@storybook/manager-webpack5": "6.5.15",
    "@storybook/react": "6.5.15",
    "@szhsin/react-menu": "^3.0.0",
    "@types/chance": "^1.1.3",
    "@types/react-beautiful-dnd": "^13.1.2",
    "@types/react-router-dom": "5.3.3",
    "autoprefixer": "10.4.13",
    "axios": "^0.27.2",
    "chance": "^1.1.8",
    "core-js": "^3.6.5",
    "cronstrue": "^2.21.0",
    "date-fns": "^2.29.3",
    "date-fns-tz": "^1.3.7",
    "fast-deep-equal": "^3.1.3",
    "logrocket": "^3.0.1",
    "msw": "^0.42.1",
    "postcss": "8.4.19",
    "posthog-js": "^1.24.0",
    "qovery-typescript-axios": "^1.1.76",
    "react": "18.2.0",
    "react-beautiful-dnd": "^13.1.0",
    "react-dom": "18.2.0",
    "react-dropzone": "^14.2.2",
    "react-hook-form": "^7.34.2",
    "react-hot-toast": "^2.4.0",
    "react-redux": "8.0.5",
    "react-router-dom": "6.4.3",
    "react-select": "^5.3.2",
    "react-use-intercom": "^1.5.2",
    "react-use-websocket": "^4.2.0",
    "regenerator-runtime": "0.13.7",
    "tailwindcss": "3.2.4",
    "tslib": "^2.3.0"
  },
  "resolutions": {
    "axios": "0.27.2"
  },
  "devDependencies": {
    "@babel/core": "^7.18.13",
    "@babel/plugin-proposal-class-properties": "^7.16.7",
    "@babel/plugin-proposal-private-methods": "^7.16.11",
    "@babel/plugin-proposal-private-property-in-object": "^7.16.7",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.14.5",
    "@babel/preset-typescript": "^7.12.13",
    "@nrwl/jest": "15.5.3",
    "@nrwl/webpack": "^15.5.3",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
    "@semantic-release/github": "^8.0.6",
    "@storybook/addon-knobs": "^6.4.0",
    "@svgr/webpack": "^6.1.2",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "13.4.0",
    "@testing-library/react-hooks": "^8.0.0",
    "@trivago/prettier-plugin-sort-imports": "^3.3.0",
    "@types/chance": "^1.1.3",
    "@types/faker": "^6.6.9",
    "@types/jest": "28.1.1",
    "@types/node": "18.11.9",
    "@types/react": "18.0.25",
    "@types/react-dom": "18.0.9",
    "@types/react-router-dom": "5.3.3",
    "@types/redux-mock-store": "^1.0.3",
    "@typescript-eslint/eslint-plugin": "5.41.0",
    "@typescript-eslint/parser": "5.43.0",
    "babel-jest": "28.1.1",
    "babel-loader": "^8.1.0",
    "css-loader": "^6.4.0",
    "cypress": "^9.1.0",
    "eslint": "8.26.0",
    "eslint-config-prettier": "8.5.0",
    "eslint-plugin-cypress": "^2.10.3",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-jsx-a11y": "6.6.1",
    "eslint-plugin-react": "7.31.11",
    "eslint-plugin-react-hooks": "4.6.0",
    "faker": "^6.6.6",
    "husky": "^8.0.2",
    "identity-obj-proxy": "^3.0.0",
    "jest": "28.1.1",
    "jest-environment-jsdom": "28.1.1",
    "jest-scss-transform": "^1.0.1",
    "lint-staged": "^13.0.3",
    "prettier": "^2.8.2",
    "pretty-quick": "^3.1.3",
    "react-refresh": "^0.10.0",
    "react-select-event": "^5.5.1",
    "react-test-renderer": "18.2.0",
    "redux-mock-store": "^1.5.4",
    "semantic-release": "^19.0.5",
    "storybook-tailwind-dark-mode": "^1.0.15",
    "style-loader": "^3.3.0",
    "stylus": "^0.55.0",
    "stylus-loader": "^7.1.0",
    "ts-jest": "28.0.5",
    "ts-node": "10.9.1",
    "typescript": "4.8.4",
    "url-loader": "^4.1.1",
    "webpack": "^5.75.0",
    "webpack-merge": "^5.8.0"
  },

Ok, these two PRs should fix it I think:
#14546 and #14478

Hey! Thank you for the feedbacks!
I was doing the first PR by myself because it was breaking anyways, but did not try the content of the second PR. I'll try later or I'll try it altogether when merged.
Thank you again for the quick feedback

The issue is that resolve.mainFields need the first entry to be browser for packages like axios so the right entry point is used. In this case, because it is missing , axiostries to pull inurl` and other Node built-ins.

We'll patch this in the next release, for now the workaround is to edit your webpack.config.js file and manually add this entry.

e.g.

const { composePlugin } = require('@nrwl/webpack');
const { withReact } = require('@nrwl/react');

module.exports = composePlugin(withReact, (config) => {
  config.resolve = ['browser', 'module', 'main'];
  return config;
});

And make sure project.json points to this file:

{
  "build": {
     ...,
    "options": {
      "webpackConfig": "<app-root>/webpack.config.js"
    }
}

@ZackTherrien That looks like a different issue.

Fixed here #14546

The issue is that resolve.mainFields need the first entry to be browser for packages like axios so the right entry point is used. In this case, because it is missing , axiostries to pull inurl` and other Node built-ins.

We'll patch this in the next release, for now the workaround is to edit your webpack.config.js file and manually add this entry.

e.g.
const { composePlugin } = require('@nrwl/webpack');
const { withReact } = require('@nrwl/react');

module.exports = composePlugin(withReact, (config) => {
  config.resolve = ['browser', 'module', 'main'];
  return config;
});
And make sure project.json points to this file:
{
  "build": {
     ...,
    "options": {
      "webpackConfig": "<app-root>/webpack.config.js"
    }
}

const { composePlugins } = require('@nrwl/webpack');
const { withReact } = require('@nrwl/react');

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

seems to be more accurate

I confirm the migration to the 15.6.0 was flawless! Everything is back to normal. Thank you very much for the reactivity, you're the bests!

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.

Navigation Menu

Repository navigation

React build breaks after migrating to 15.5.1 #14389

Current Behavior

Expected Behavior

Github Repo

Steps to Reproduce

Nx Report

Failure Logs

Additional Information

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

React build breaks after migrating to 15.5.1 #14389

Description

Current Behavior

Expected Behavior

Github Repo

Steps to Reproduce

Nx Report

Failure Logs

Additional Information

Activity

mandarini commented on Jan 16, 2023

vadimka123 commented on Jan 17, 2023

kenneth-toxcon commented on Jan 17, 2023

nvonbenken commented on Jan 18, 2023

bdebon commented on Jan 19, 2023

kenneth-toxcon commented on Jan 19, 2023

ivi-hamiti commented on Jan 19, 2023

jihoun commented on Jan 20, 2023

PointSingularity commented on Jan 23, 2023

bigcakes commented on Jan 23, 2023

mandarini commented on Jan 23, 2023

bdebon commented on Jan 23, 2023

mandarini commented on Jan 23, 2023

bdebon commented on Jan 23, 2023

jaysoo commented on Jan 23, 2023

zackarydev commented on Jan 23, 2023

jaysoo commented on Jan 23, 2023

jaysoo commented on Jan 23, 2023

jihoun commented on Jan 24, 2023

bdebon commented on Jan 24, 2023

github-actions commented on Mar 3, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions