reactjswebpackcreate-react-appreact-pdf

I can't modify webpack.config in create-react-app to install react-pdf


Help me install the react-pdf package (https://github.com/diegomura/react-pdf) on create react app. I can't make changes to webpack.config. I do it according to the instructions I found here from the user River Twilight: How to update webpack config for a react project created using create-react-app?

According to the instructions of installing react-pdf

  1. I run npm install process browserify-zlib stream-browserify util buffer assert
  2. Created config-override.js in project root folder
  3. Next you need to insert the following lines into the config:

const webpack = require("webpack");

module.exports = {
  /* ... */

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

  /* ... */
}

But a) webstorm swears, b) the project is not started by the "start": "react-app-rewired start".

Errors that I get without changing the config:

Compiled with problems:X

ERROR in ./node_modules/@react-pdf/pdfkit/lib/pdfkit.browser.es.js 2:0-28

Module not found: Error: Can't resolve 'stream' in 'C:\Users\schek\Desktop\react\snitch\node_modules\@react-pdf\pdfkit\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 }


ERROR in ./node_modules/@react-pdf/pdfkit/lib/pdfkit.browser.es.js 4:0-24

Module not found: Error: Can't resolve 'zlib' in 'C:\Users\schek\Desktop\react\snitch\node_modules\@react-pdf\pdfkit\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: { "zlib": require.resolve("browserify-zlib") }'
    - install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "zlib": false }


ERROR in ./node_modules/@react-pdf/png-js/lib/png-js.browser.es.js 1:0-24

Module not found: Error: Can't resolve 'zlib' in 'C:\Users\schek\Desktop\react\snitch\node_modules\@react-pdf\png-js\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: { "zlib": require.resolve("browserify-zlib") }'
    - install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "zlib": false }


ERROR in ./node_modules/blob-stream/index.js 1:21-47

Module not found: Error: Can't resolve 'stream' in 'C:\Users\schek\Desktop\react\snitch\node_modules\blob-stream'

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 }


ERROR in ./node_modules/restructure/src/EncodeStream.js 23:11-28

Module not found: Error: Can't resolve 'stream' in 'C:\Users\schek\Desktop\react\snitch\node_modules\restructure\src'

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 }

Solution

  • These errors seems to have happened due to react-scripts v5. Took me a day to figure out a solution while using react-router v5. But it seems the best approach for now is to stay on, or revert back to v4.0.3 until v5 adds back support for node built-ins #11764 is merged and released.

    This issue on Github might help.