v5 used to include polyfills for node.js core modules by default

damozhang commented 2 years ago

Describe the bug

Compiled with problems

Did you try recovering your dependencies?

yarn --version
1.22.15

Which terms did you search for in User Guide?

react-scripts 5 webpack Module not found: Error: Can't resolve 'fs'

Environment

npx create-react-app --info

Environment Info:

  current version of create-react-app: 5.0.0
  running from /Users/xxx/.config/yarn/global/node_modules/create-react-app

  System:
    OS: macOS 12.0.1
    CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
  Binaries:
    Node: 16.13.0 - /usr/local/Cellar/node@16/16.13.0/bin/node
    Yarn: 1.22.15 - /usr/local/bin/yarn
    npm: 8.1.0 - /usr/local/Cellar/node@16/16.13.0/bin/npm
  Browsers:
    Chrome: 96.0.4664.93
    Edge: Not Found
    Firefox: 94.0.1
    Safari: 15.1
  npmPackages:
    react:  17.0.2 
    react-dom:  17.0.2 
    react-scripts:  5.0.0 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

In a project with react-scripts v5.0.0

yarn add -D dotenv
yarn start

Expected behavior

Actual behavior

ERROR in ../../node_modules/dotenv/lib/main.js 24:11-24
Module not found: Error: Can't resolve 'fs' in '../node_modules/dotenv/lib'
 @ ./src/config.ts 5:0-28 8:0-13
 @ ./src/index.tsx 17:0-66 27:19-27 29:23-43 30:23-43 34:35-60

ERROR in ../../node_modules/dotenv/lib/main.js 26:13-28
Module not found: Error: Can't resolve 'path' in '../node_modules/dotenv/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: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }
 @ ./src/config.ts 5:0-28 8:0-13
 @ ./src/index.tsx 17:0-66 27:19-27 29:23-43 30:23-43 34:35-60

ERROR in ../../node_modules/dotenv/lib/main.js 28:11-24
Module not found: Error: Can't resolve 'os' in '../node_modules/dotenv/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: { "os": require.resolve("os-browserify/browser") }'
    - install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "os": false }
 @ ./src/config.ts 5:0-28 8:0-13
 @ ./src/index.tsx 17:0-66 27:19-27 29:23-43 30:23-43 34:35-60

3 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

Some useful comments:

dependency aliases

react-app-rewired config

@craco/craco config

hacking react-scripts with patch-package

david86702 commented 2 years ago

great. It's working for me.

WalkerWang731 commented 2 years ago

I somehow fixed it too using react-app-rewired Make sure you install this package and create new file config-overrides.js in your root directory

/* config-overrides.js */
const webpack = require('webpack');
module.exports = function override(config, env) {
    //do stuff with the webpack config...

    config.resolve.fallback = {
        url: require.resolve('url'),
        assert: require.resolve('assert'),
        crypto: require.resolve('crypto-browserify'),
        http: require.resolve('stream-http'),
        https: require.resolve('https-browserify'),
        os: require.resolve('os-browserify/browser'),
        buffer: require.resolve('buffer'),
        stream: require.resolve('stream-browserify'),
    };
    config.plugins.push(
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer'],
        }),
    );

    return config;
}

Now edit your package.json for making react-app-rewired to work.

//package.json
...
 "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "assert": "^2.0.0",
    "buffer": "^6.0.3",
    "crypto": "npm:crypto-browserify",
    "crypto-browserify": "^3.12.0",
    "https-browserify": "^1.0.0",
    "os-browserify": "^0.3.0",
    "react": "^17.0.2",
    "react-app-rewired": "^2.1.9",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "rewire": "^6.0.0",
    "stream": "npm:stream-browserify",
    "stream-browserify": "^3.0.0",
    "stream-http": "^3.2.0",
    "url": "^0.11.0",
    "web-vitals": "^2.1.2",
    "web3": "^1.6.1"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

Hope this helps.

Thanks.

looks, good! Thank you!

lnvestor commented 2 years ago

I am using craco for CRA config overrides. Does anybody know how to configure it to fix this issue?

Hi there if you are using craco because of tailwind i suggest you to install tailwind v3 craco not required anymore in last version of tailwind

michaelmarziani commented 2 years ago

I am using craco for CRA config overrides. Does anybody know how to configure it to fix this issue?

Dear @smelamud,

I posted a start to finish example using CRA and craco overrides. It's specific to the project @react-pdf/renderer, but I think it will give you a sense of how to do overrides using craco. https://stackoverflow.com/a/70441023/2193573

Good luck!

n8sabes commented 2 years ago

I too am using craco, but not tailwind and need a solution. I have temporarily removed packages that will not build and therefore lost functionality.

There are likely a lot of libraries in the ecosystem that will fail to build due to this issue. This may result in the loss of some great works because their authors either do not have the time or knowhow to fix this.

Here is one example of a great package, lost to this issue: Clean-CSS

obrad97 commented 2 years ago

I followed all the steps above and i am still getting "Uncaught ReferenceError: Buffer is not defined" error... I have tried everything, i don't know what else to do

ysageev commented 2 years ago

Just to pile on -- I cannot proceed with upgrading to 5.0 until this gets fixed. I'm not going to install react-app-rewired/eject and hack around the absence of expected behavior. Can we get a hard answer on whether this fix will be included in 5.0.1?

baeteja commented 2 years ago

Also not using 5.0 if this does not get addressed.

DanishSiraj commented 2 years ago

Same issue here, got resolved by adding fallbacks to node_modules/react-scripts/config/webpack.config.js and installing the said packages, this seems a temporary solution though for CI/CD deployments to netlify/vercel this won't hold and build will break :thinking:

PrimeCoderDev commented 2 years ago

I am using JWT-Simple, I have to add

//webpack.config.js
    resolve: {
      fallback: {
        crypto: require.resolve('crypto-browserify'),
        stream: require.resolve("stream-browserify"),
        buffer: require.resolve("buffer/")
      },
    }

But it did not work at all, there is still no solution?🤔🤔

michaelmarziani commented 2 years ago

@PrimaryOmega I think you need something like in the webpack.configure.plugins section of my craco.config.js, as well as the webpack definition at the top:

const webpack = require("webpack");

module.exports = {
  webpack: {
    configure: {
      resolve: {
        fallback: {
          process: require.resolve("process/browser"),
          zlib: require.resolve("browserify-zlib"),
          stream: require.resolve("stream-browserify"),
          util: require.resolve("util"),
          buffer: require.resolve("buffer"),
          asset: require.resolve("assert"),
        },
      },
      plugins: [
        new webpack.ProvidePlugin({
          Buffer: ["buffer", "Buffer"],
          process: "process/browser",
        }),
      ],
    },
  },
};

I got this webpack config from the package maintainer, and then adapted it for use in craco. I also had to install the additional packages, in this case process browserify-zlib stream-browserify util buffer assert.

PrimeCoderDev commented 2 years ago

@michaelmarziani

I am using Tailwind CSS v3, I put it in the postcss.config.js

const webpack = require("webpack");

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },  webpack: {
    configure: {
      resolve: {
        fallback: {
          process: require.resolve("process/browser"),
          zlib: require.resolve("browserify-zlib"),
          stream: require.resolve("stream-browserify"),
          util: require.resolve("util"),
          buffer: require.resolve("buffer"),
          asset: require.resolve("assert"),
        },
      },
      plugins: [
        new webpack.ProvidePlugin({
          Buffer: ["buffer", "Buffer"],
          process: "process/browser",
        }),
      ],
    },
  },
}

And the dependencies you mentioned in the webpack.config.js

resolve: {
      fallback: {
        crypto: require.resolve('crypto-browserify'),
        stream: require.resolve("stream-browserify"),
        process: require.resolve("process/browser"),
        zlib: require.resolve("browserify-zlib"),
        util: require.resolve("util"),
        buffer: require.resolve("buffer"),
        asset: require.resolve("assert"),
      },
}

and it didn't work 🤧🤧

Oni-giri commented 2 years ago

Does someone know how to install the previous version of CRA? npx create-react-app@4.0.3 my-app fails:

You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0).

We no longer support global installation of Create React App.

Please remove any global installs with one of the following commands:
- npm uninstall -g create-react-app
- yarn global remove create-react-app

DanishSiraj commented 2 years ago

npx create-react-app@4.0.3 failing for me as well, did clone an existing 4.0.3 project for now 😓

lnvestor commented 2 years ago

@michaelmarziani

I am using Tailwind CSS v3, I put it in the postcss.config.js

const webpack = require("webpack");

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },  webpack: {
    configure: {
      resolve: {
        fallback: {
          process: require.resolve("process/browser"),
          zlib: require.resolve("browserify-zlib"),
          stream: require.resolve("stream-browserify"),
          util: require.resolve("util"),
          buffer: require.resolve("buffer"),
          asset: require.resolve("assert"),
        },
      },
      plugins: [
        new webpack.ProvidePlugin({
          Buffer: ["buffer", "Buffer"],
          process: "process/browser",
        }),
      ],
    },
  },
}

And the dependencies you mentioned in the webpack.config.js

resolve: {
      fallback: {
        crypto: require.resolve('crypto-browserify'),
        stream: require.resolve("stream-browserify"),
        process: require.resolve("process/browser"),
        zlib: require.resolve("browserify-zlib"),
        util: require.resolve("util"),
        buffer: require.resolve("buffer"),
        asset: require.resolve("assert"),
      },
}

and it didn't work 🤧🤧

Bro try this am using tailwind v3 postcss 8 and it's works for me https://github.com/facebook/create-react-app/issues/11756#issuecomment-1001162736

michaelmarziani commented 2 years ago

@PrimaryOmega My configuration is specific to using craco to override CRA and inject additional webpack configs.

PrimeCoderDev commented 2 years ago

@michaelmarziani I am using Tailwind CSS v3, I put it in the postcss.config.js
const webpack = require("webpack");

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },  webpack: {
    configure: {
      resolve: {
        fallback: {
          process: require.resolve("process/browser"),
          zlib: require.resolve("browserify-zlib"),
          stream: require.resolve("stream-browserify"),
          util: require.resolve("util"),
          buffer: require.resolve("buffer"),
          asset: require.resolve("assert"),
        },
      },
      plugins: [
        new webpack.ProvidePlugin({
          Buffer: ["buffer", "Buffer"],
          process: "process/browser",
        }),
      ],
    },
  },
}
And the dependencies you mentioned in the webpack.config.js
resolve: {
      fallback: {
        crypto: require.resolve('crypto-browserify'),
        stream: require.resolve("stream-browserify"),
        process: require.resolve("process/browser"),
        zlib: require.resolve("browserify-zlib"),
        util: require.resolve("util"),
        buffer: require.resolve("buffer"),
        asset: require.resolve("assert"),
      },
}
and it didn't work 🤧🤧
Bro try this am using tailwind v3 postcss 8 and it's works for me #11756 (comment) It worked, but it does not show the errors as before by the system console or in the browser, only in the developer console. 😪😪It is programmable, but now I have to visit the developer console more often hahaha. 🤣🤣

yulolimum commented 2 years ago

For those that don't want to use craco or react-app-rewired. You can use patch-package.

Install patch-package: yarn add patch-package.
Install the needed pollyfills and modify node_modules/react-scripts/config/webpack.config.js. Here's an example. This is taken from Webpack's docs. Don't add all of them, only the ones you need. Side note, for those wondering which ones need to be pollyfilled, do an initial build of your application and it will tell you. Another side note, make sure you install the packages first before modifying the webpack config.
Run yarn patch-package react-scripts. This will generate a patch (this should be committed in your repo going forward).
Add a postinstall script to package.json: "postinstall": "yarn patch-package",. Now, anytime, someone installs npm deps on this project, will get the patch you created in step 3 applied automatically.
Enjoy zero compile errors.

ilijapet commented 2 years ago

I have same issue when I try to use web3.js (1.6.1)

Compiled with problems:X

ERROR in ./node_modules/cipher-base/index.js 3:16-43

Module not found: Error: Can't resolve 'stream' in '/home/ilijapet/proba/smartCOOP2.0/smartcoop_react/node_modules/cipher-base'