Module not found: Error: Can't resolve 'buffer'

[Gratify-Ocelot]

Hi, I believe https://github.com/diegomura/react-pdf/pull/1891 should fix problem with create-react-app v5 using webpack 5. But unfortunately when creating fresh cra application with instruction from quick-start https://react-pdf.org/ I see following errors:

Failed to compile.

Module not found: Error: Can't resolve 'buffer' in '/Users/user/Documents/Code/cra-pdf-test/node_modules/base64-to-uint8array'
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: { "buffer": require.resolve("buffer/") }'
	- install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "buffer": false }
ERROR in ./node_modules/base64-to-uint8array/index.js 8:10-32
Module not found: Error: Can't resolve 'buffer' in '/Users/user/Documents/Code/cra-pdf-test/node_modules/base64-to-uint8array'

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

webpack compiled with 1 error
Files successfully emitted, waiting for typecheck results...
Issues checking in progress...
No issues found.

here is reproduction repo: https://github.com/Gratify-Ocelot/cra-pdf-test

Originally posted by @Gratify-Ocelot in https://github.com/diegomura/react-pdf/issues/1891#issuecomment-1240563473

here is proposed fix by @carlobeltrame https://github.com/diegomura/react-pdf/pull/1891#issuecomment-1240631229

[Ahmad-Rami1]

I solved it by doing the following

in node_modules/base64-to-uint8array/index.js just comment out the following function:

function node (s) { var b = require('buf' + 'fer') return new b.Buffer(s, 'base64')

}

[ghost]

What's the version of the @react-pdf/renderer are you using? Do you also got @react-pdf/font or @react-pdf/fontkit as a dependancy ?

[R-Gallagher]

I ran into the same issue and seem to have fixed it. I hope this helps?

I was on react-app-rewired, but thought that recent updates here would allow me to transition off back to Create React App. This worked in development, and on local builds, but when I tried to deploy to Netlify, I got the error shown in this issue.

I fixed it with two changes:

1. Using the changes described here relevant to Webpack 5: https://github.com/wojtekmaj/react-pdf#configure-pdfjs-worker
2. running npm install --save buffer

Note that this works on Create React App, and I did not have to write a config override.

[carlobeltrame]

described here relevant to Webpack 5: https://github.com/wojtekmaj/react-pdf#configure-pdfjs-worker

@R-Gallagher this repository here is diegomura/react-pdf, which is a completely different library than wojtekmaj/react-pdf which you mention. Your workaround probably has nothing to do with the problem in this issue.

@all a real fix is already described in the comment linked in this issue's description. This will be fixed sometime in the next weeks. In the meantime, it's just a warning and should have no real effect on the working of your browser bundle.

[R-Gallagher]

@carlobeltrame apologies! I'm not sure how I missed that, was just trying to help! Good catch and cheers 👍

[ghost]

@diegomura any plans for next release?

[diegomura]

Done!

[adnanHussain07]

In my react-app there isnt any file name webpack.config.js so here is how I resolved my problem:

1- First, install the buffer package:

"npm install buffer"

2- Create a file named at the root of your project.

react-app-rewired.config.js

3- Add the following code to the file:

const webpack = require('webpack');
module.exports = {
  webpack: (config, { isServer }) => {
    // Add fallback for 'buffer' module
    if (!isServer) {
      config.resolve.fallback = {
        buffer: require.resolve('buffer'),
      };
    }

    return config;
  },
};