-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Incompatible with Webpack 5 due to Buffer dependency #1029
Comments
I also have this problem |
Same here, any news @diegomura ? |
I was finally able to make it works.. Then in my webpack config:
|
@GregdTd that didn't work for me though... |
@matheusgrieger I solved it in the same way. What error are you getting? What if you add buffer under |
@csvan tried that but didn't work. Actually my error was being caused by a state update in another component while the PDF was rendering. Though it didn't change anything at all about the PDF content, it was crashing the app. Some context would be good, too. I'm running React PDF in Electron and don't even need these fallbacks at all... |
@matheusgrieger I also made it work with I know that it's probably late and you already fixed it or move on, but if you have some error log to show us, then we could help you debug that. |
@mstrk I will happily get some logs to help you debug. But won't be possible for now though, as I have to change the way I wired up the app. |
After doing the above I get this error:
|
@osimuka In my setup (nx monorepo) i also had to add the following line in
I guess you can also add this line in your index.html in a |
@osimuka can you remove something like this: {
{...}
resolve: {
fallback: {
util: require.resolve('util/'),
assert: require.resolve('assert/'),
stream: require.resolve('stream-browserify'),
zlib: require.resolve('browserify-zlib'),
},
},
plugins: [
new webpack.ProvidePlugin({
Buffer: ['buffer', 'Buffer'],
process: 'process/browser',
}),
],
} hope it helps, cheers 🖖 |
I'm using react17, with webpack5 I did this:
|
I have tried that, I got
|
@osimuka did you remove this? <script>
var global = window;
</script> and have I don’t have I think you have a mismatch of libs installed for what some of your other packages expect. If you check this line on EDIT: I do have |
I have the modules
Once I install buffer I get this error on the browser with
Once I put it back, I get this error:
And I have also removed
|
@osimuka do what webpack ask you to do. if you install buffer add it to fallback.
and don't remove:
|
I made the changes, this is the error that happens on compile time There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
<path>/node_modules/restructure/src/Buffer.js
Used by 53 module(s), i. e.
<path>/node_modules/@react-pdf/renderer/dist/react-pdf.browser.es.js
<path>/node_modules/restructure/src/buffer.js
Used by 12 module(s), i. e.
<path>/node_modules/restructure/src/EncodeStream.js``` |
@osimuka hmmm, you have multiple modules defined. I think you can’t define and fallback at the same time, I would have to search the docs in webpack. I would suggest you remove the sorry for not being much help. cheers🖖 |
Yah I tried that, but it gave the error |
I'm getting the same error as initially mentioned, but still no luck after reading through all this. Would be awesome if this is continually looked into. |
This StackOverflow answer solved it for me: https://stackoverflow.com/a/65556946/15291780. To be specific, here is how different configs look like: webpack.config.js Imported packages in package.json (I use VS2019 Community Edition): |
Hmm, still not working for me. I'm using snowpack, though, which may be why. Here is what my
And still getting the same error. |
@ECWireless, after I was experimenting with all the different modules and plugins, my 'node_modules' folder got bloated and random issues appeared. What helped me is to delete 'node_modules' and restore only needed packages from config. Maybe something that would help you as well. |
This solution actually works for me for Webpack 5.21.2 @diegomura but I suppose it should be also fixed in version 2.0.0? |
Hello hello @diegomura, Again I resolved it with: resolve: {
extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
plugins: [new TsconfigPathsPlugin()],
alias: {
process: 'process/browser',
stream: "stream-browserify",
zlib: "browserify-zlib",
path: "path-browserify"
},
fallback: {
fs: false,
crypto: false //<----- adding this line removed the warning
}
}, |
If anyone stumbles accross this using Next.js, you only need to add an alias for This config in next.config.js worked for me:
|
I googled the issue text and found this https://stackoverflow.com/a/47632275 looks like the problem is not in webpack config |
hello @jeetiss i tryied to run my project with the exact config of the instruction but still having th same error , here is a link to the repo i used form my last test |
@j0nezz thank you! Greatly helped! : > |
I'm getting the same issue as @baonguyen2411.
I followed these instructions and have all the fallbacks setup but still getting this. |
Can we find a way to fix this so it doesn't require modifying the webpack.config file? |
i also got the Buffer is not defined error despite having tried all of the recommended work arounds.... I'm using create-react-app v5. There must be a solution without requiring to modify the webpack config? |
Yes, I also got the exact same issue and cannot resolve it @jeetiss |
@wwww09z @baonguyen2411 You could try to add this rule to your webpack file
In my case (using NextJS 12), it looks like this With that configuration you will force your restructure module to import the correct buffer from node_modules instead of trying to import a inner file of that library EDIT: If you don't already have it, you have to install |
@Sasurtio Thanks for your suggestion. Yes, im using macOS, but unfortunately, it still getting the same error after installing and configuring the |
Are you using Could you provide your |
Sure, yep, my project is using react and Im using
|
Just for guys who have the same issue as mine and cannot resolve it after trying everything. I used the final solution which is to downgrade the Webpack from 5 to 4, then the issue resolved. This is not a solution actually, but just put here as an idea. |
@wwww09z Sorry to hear that. I think there should be a way to resolve this issue without adding a Can you provide me more info? like if its Or could you provide me a mini repo where you can reproduce the issue? (For example creating one from scratch, copying the relevant config from your actual repo and only adding a component where you use this library and the error comes up) |
@wwww09z which webpact version did you install? im trying to downgrade my webpack but version 4.0.0 is stil giving me the error |
Hi @ALL, currently I have resolved the problem and I'm using Window, this is my Webpack 5 config |
@baonguyen2411 could you paste the code please >.< also what npm packages did you install for this? And is this webpack config or craco config? im getting zlib bindings error T_T |
@baonguyen2411 Have you changed case sensitivity in your folder? |
Hi @Sasurtio , thanks, if I still need to use webpack 5, I will try to create a mini repo later and let you know. @yubinitdadev , here are the webpack and related packages' versions:
|
@wwww09z when you have time could you try this rule instead of the other? Also added backslash routes support (windows without WSL will need it)
Here is the regex test that demonstrates the effectivity of this regex file searching: https://regex101.com/r/MZ7M1o/1 Let me know if it worked! |
@Sasurtio Hi, I finally solved this issue that @baonguyen2411 first posed thanks to your code! Thanks a lot 😄 |
Follow this: https://stackoverflow.com/questions/63729455/hosted-images-with-react-pdf/72744600#72744600 |
Agonised for hours but eventually found this guide which fixed it for me. I had an extra issues (browserify-zlib) but resolved it using the same principle (adding to config-overrides.js and installing) |
@WilliamPhilippe Yes for me as well |
For me, it works running this: npm install assert buffer process stream-browserify util @react-pdf/zlib and changing webpack config to: const webpack = require('webpack')
module.exports = {
plugins: [
new webpack.ProvidePlugin({
Buffer: ['buffer', 'Buffer'],
}),
new webpack.ProvidePlugin({
process: 'process/browser',
}),
],
resolve: {
fallback: {
zlib: require.resolve('@react-pdf/zlib'),
stream: require.resolve('stream-browserify'),
buffer: require.resolve('buffer'),
},
},
} |
please re-open this thread as CRA now uses webpack 5 as the default install. |
Webpack 5 removes Buffer (see https://webpack.js.org/migrate/5/), effectively breaking this library since it has explicit usages of it in the code.
The text was updated successfully, but these errors were encountered: