web-pack 5 incompatible issue in react scripts 5.0.0 (CRA) without craco

[Gopisuresh-Akula]

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 }

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 }

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 }

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 }

I'm getting this issue while I'm using CRA react scripts 5.0.0 please check this issue

[straycatse]

Same here. I would like to find a solution without having to eject the CRA-project.

[diarcastro]

I use this solution and I worked! https://github.com/diegomura/react-pdf/issues/1740#issuecomment-1065509181

[Gopisuresh-Akula]

@diarcastro thanks for ur response moreover it should be without craco setup do you have any solution ??

[Jaseibert]

Still having the issue.

[inouekun]

I use patch-package to modify the react-scripts webpack node-modules/react-scripts/config/webpack.config.js without using Craco or eject.

Once you installed the patch-package follow https://github.com/diegomura/react-pdf#webpack-5 step. After all the extra dependencies and webpack has been installed and modified, do run npx patch-package react-scripts to apply patch on the existing react-scripts.

Optional: If you're having conflict with other library, which in my case I need to use:

new webpack.ProvidePlugin({
        Buffer: ["buffer", "Buffer"],
        process: "process/browser.js",
      }),

instead of

new webpack.ProvidePlugin({
        Buffer: ["buffer", "Buffer"],
        process: "process/browser",
      }),

[johnnyb]

For me, the only way I got it to work was to add the following to index.js:

import "process";
window.process = process;

[Qurishe]

@inouekun it has been 2 days since i am struggling with this problem, can you please share your modified version of webpack.config.js. i just don't know where to put these config files inside of the webpack.config.js file. it would be a great help. thanks again for the help

[oregev]

Can this help? will handle WP5 with CRA 17-18 https://www.npmjs.com/package/react-pdf-browser

[Qurishe]

@oregev wow that would be awesome!! Thank u soo much, should i just install this package and use react-pdf/renderer as before?

[oregev]

@Qurishe Yes ... But you import from this package. i.e import { Document, Page, Text, View, StyleSheet, ... and what you need from @react-pdf/renderer } from 'react-pdf-browser'

[Qurishe]

@oregev that was exactly the answer to my question i will try it out and will let u know.... Thank you again😊😊

[diegomura]

Why creating two issues about the same? https://github.com/diegomura/react-pdf/issues/1740

[diegomura]

Closing as duplicate of this https://github.com/diegomura/react-pdf/issues/1795

[adamduncan]

Have added an explanation (following on from @inouekun's pointer) on how we got this one working in the main issue ticket: https://github.com/diegomura/react-pdf/issues/1795#issuecomment-1156447762

[Gopisuresh-Akula]

production mode getting issue like
Could not load content for webpack://react-pdf @react-pdf/renderer/lib/react-pdf.browser.es.js.map: Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

when imported from react-pdf-browser production app crashing @oregev pls check out these

[RiJung]

still facing these issue

if someone need i use react rewrite

in package.json

 "start": "cross-env PORT=3000 react-app-rewired start"

in config-overrides.js

const webpack = require('webpack'); 
module.exports = function override(config) { 
        const fallback = config.resolve.fallback || {}; 
        Object.assign(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"),
                fs: require.resolve('browserify-fs')
      }) 
   config.resolve.fallback = fallback; 
   config.plugins = (config.plugins || []).concat([ 
    new webpack.ProvidePlugin({ 
        Buffer: ['buffer', 'Buffer'],
        process: 'process/browser'
    }) 
   ]) 
   return config; }

[paul0rocha]

Error: Module not found: Error: Can't resolve 'fs' in 'C:\Users\paulo\Downloads\aula13\aula13\aula13-front\node_modules\send\node_modules\mime'