React build breaks after migrating to 15.5.1 #14389

danr-za · 2023-01-16T12:32:55Z

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

The text was updated successfully, but these errors were encountered:

mandarini · 2023-01-16T14:39:20Z

Mentioning this here as potentially related?

vadimka123 · 2023-01-17T08:07:30Z

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

danr-za · 2023-01-17T08:24:21Z

It is not mentioned or reported anywhere as a breaking change (and in a minor version), so I would not expect anything to break.

kenneth-toxcon · 2023-01-17T23:32:36Z

Seems related to a change added in #14285

nvonbenken · 2023-01-18T13:08:17Z

I'm also running into this.

bdebon · 2023-01-19T12:58:44Z

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

kenneth-toxcon · 2023-01-19T16:51:52Z

@bdebon migrating to 15.4.4 works for me now.

ivi-hamiti · 2023-01-19T21:19:41Z

encountered same issue when upgraded from 15.4.2 -> 15.5.2

jihoun · 2023-01-20T02:09:27Z

@bdebon migrating to 15.4.4 works for me now.

According to my test it appeared in 15.4.6

PointSingularity · 2023-01-23T07:04:46Z

15.5.3 Still has the same problem.

bigcakes · 2023-01-23T13:15:13Z

Also hitting this issue, pretty surprising for a minor bump

mandarini · 2023-01-23T14:41:03Z

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

bdebon · 2023-01-23T14:59:23Z

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"
  },

mandarini · 2023-01-23T15:09:40Z

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

bdebon · 2023-01-23T15:13:21Z

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

jaysoo · 2023-01-23T15:40:36Z

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"
    }
}

jaysoo · 2023-01-23T16:51:00Z

@ZackTherrien That looks like a different issue.

jaysoo · 2023-01-23T22:25:27Z

Fixed here #14546

jihoun · 2023-01-24T07:30:15Z

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

bdebon · 2023-01-24T11:07:08Z

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!

danr-za · 2023-01-24T17:33:31Z

Thanks @jaysoo @mandarini ❤️

github-actions · 2023-03-03T01:57:41Z

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.

danr-za added the type: bug label Jan 16, 2023

FrozenPandaz added the scope: react Issues related to React support for Nx label Jan 18, 2023

jaysoo self-assigned this Jan 23, 2023

jaysoo mentioned this issue Jan 23, 2023

Building of react apps fails when migrating from 15.4.5 to 15.4.6 #14385

Closed

This comment was marked as off-topic.

Sign in to view

jaysoo closed this as completed Jan 23, 2023

bdebon mentioned this issue Jan 24, 2023

chore(nx): migrate nx to latest version Qovery/console#460

Merged

8 tasks

AlikRakhmonov mentioned this issue Feb 10, 2023

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

Closed

github-actions bot added the outdated label Mar 3, 2023

github-actions bot locked as resolved and limited conversation to collaborators Mar 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React build breaks after migrating to 15.5.1 #14389

React build breaks after migrating to 15.5.1 #14389

danr-za commented Jan 16, 2023 •

edited

mandarini commented Jan 16, 2023

vadimka123 commented Jan 17, 2023

danr-za commented Jan 17, 2023 •

edited

kenneth-toxcon commented Jan 17, 2023 •

edited

nvonbenken commented Jan 18, 2023

bdebon commented Jan 19, 2023 •

edited

kenneth-toxcon commented Jan 19, 2023

ivi-hamiti commented Jan 19, 2023

jihoun commented Jan 20, 2023

PointSingularity commented Jan 23, 2023

bigcakes commented Jan 23, 2023

mandarini commented Jan 23, 2023

bdebon commented Jan 23, 2023

mandarini commented Jan 23, 2023

bdebon commented Jan 23, 2023

jaysoo commented Jan 23, 2023

This comment was marked as off-topic.

jaysoo commented Jan 23, 2023

jaysoo commented Jan 23, 2023

jihoun commented Jan 24, 2023

bdebon commented Jan 24, 2023

danr-za commented Jan 24, 2023

github-actions bot commented Mar 3, 2023

React build breaks after migrating to 15.5.1 #14389

React build breaks after migrating to 15.5.1 #14389

Comments

danr-za commented Jan 16, 2023 • edited

Current Behavior

Expected Behavior

Github Repo

Steps to Reproduce

Nx Report

Failure Logs

Additional Information

mandarini commented Jan 16, 2023

vadimka123 commented Jan 17, 2023

danr-za commented Jan 17, 2023 • edited

kenneth-toxcon commented Jan 17, 2023 • edited

nvonbenken commented Jan 18, 2023

bdebon commented Jan 19, 2023 • edited

kenneth-toxcon commented Jan 19, 2023

ivi-hamiti commented Jan 19, 2023

jihoun commented Jan 20, 2023

PointSingularity commented Jan 23, 2023

bigcakes commented Jan 23, 2023

mandarini commented Jan 23, 2023

bdebon commented Jan 23, 2023

mandarini commented Jan 23, 2023

bdebon commented Jan 23, 2023

jaysoo commented Jan 23, 2023

This comment was marked as off-topic.

jaysoo commented Jan 23, 2023

jaysoo commented Jan 23, 2023

jihoun commented Jan 24, 2023

bdebon commented Jan 24, 2023

danr-za commented Jan 24, 2023

github-actions bot commented Mar 3, 2023

danr-za commented Jan 16, 2023 •

edited

danr-za commented Jan 17, 2023 •

edited

kenneth-toxcon commented Jan 17, 2023 •

edited

bdebon commented Jan 19, 2023 •

edited