Issue on react-scripts@5.0.0, react@18.0.0

[ryangarde]

Describe the bug Since I am using create-react-app, I needed to use react-app-rewired to configure my webpack.config. This is what my config-overrides.js looks like:

const webpack = require('webpack');

module.exports = function override(config, env) {
    config.plugins = [
        new webpack.ProvidePlugin({
            Buffer: ['buffer', 'Buffer'],
            process: 'process/browser',
        }),
    ];
    config.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'),
    };

    return config;
};

Whenever I put this code

config.plugins = [
    new webpack.ProvidePlugin({
        Buffer: ['buffer', 'Buffer'],
        process: 'process/browser',
    }),
];

on the webpack.config and start the server, it produces this error on the terminal URIError: Failed to decode param '/%PUBLIC_URL%/manifest.json'. I tried removing the %PUBLIC_URL% and it just gives me white screen with no errors.

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser: Brave
• React-pdf version: 2.1.1

[boyboi86]

Ok, it may not be helpful but.. u need to put in alias..

    alias: {
      zlib: require.resolve("browserify-zlib"),
      stream: require.resolve("stream-browserify")
    },

Regardless, it will still give error when complied.

Any updates/ solution any1? Cause I just started a new project in react 18

I can't even perform npm install

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: sb-private-webapp-client@0.1.0
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR!   react@"^18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.6 || ^17.0.0" from @react-pdf/renderer@2.1.1
npm ERR! node_modules/@react-pdf/renderer
npm ERR!   @react-pdf/renderer@"^2.1.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

[XRJPK]

Same here...

You can try npm install @react-pdf/renderer --save --legacy-peer-deps as workaround...

[boyboi86]

@XRJPK Thanks for the advice.

Yup, i tried that ytd. Then I installed the polyfills. Went to webpack.config.js

put them in like the below (Help me take a look? Thanks every1)

    resolve:  {
      // This allows you to set a fallback for where webpack should look for modules.
      // We placed these paths second because we want `node_modules` to "win"
      // if there are any conflicts. This matches Node resolution mechanism.
      // https://github.com/facebook/create-react-app/issues/253
      modules: ['node_modules', paths.appNodeModules].concat(
        modules.additionalModulePaths || []
      ),

      // These are the reasonable defaults supported by the Node ecosystem.
      // We also include JSX as a common component filename extension to support
      // some tools, although we do not recommend using it, see:
      // https://github.com/facebook/create-react-app/issues/290
      // `web` extension prefixes have been added for better support
      // for React Native Web.
      extensions: paths.moduleFileExtensions
        .map(ext => `.${ext}`)
        .filter(ext => useTypeScript || !ext.includes('ts')),

        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"),
        },
      alias: {
        // Support React Native Web
        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
        'react-native': 'react-native-web',

        // Allows for better profiling with ReactDevTools
        ...(isEnvProductionProfile && {
          'react-dom$': 'react-dom/profiling',
          'scheduler/tracing': 'scheduler/tracing-profiling',
        }),
        ...(modules.webpackAliases || {}),
      },
      plugins: [
        // Prevents users from importing files from outside of src/ (or node_modules/).
        // This often causes confusion because we only process files within src/ with babel.
        // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
        // please link the files into your node_modules/ and let module-resolution kick in.
        // Make sure your source files are compiled, as they will not be processed in any way.
        new ModuleScopePlugin(paths.appSrc, [
          paths.appPackageJson,
          reactRefreshRuntimeEntry,
          reactRefreshWebpackPluginRuntimeEntry,
          babelRuntimeEntry,
          babelRuntimeEntryHelpers,
          babelRuntimeRegenerator,
        ]),
        new webpack.ProvidePlugin({
          Buffer: ["buffer", "Buffer"],
          process: "process/browser",
        }),

      ],

Then I still got these error..

index.js:1 Uncaught Error: Cannot find module 'stream'
    at webpackMissingModule (index.js:1:1)
    at Object../node_modules/blob-stream/index.js (index.js:1:1)
    at Object.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at Module../node_modules/@react-pdf/renderer/lib/react-pdf.browser.es.js (resolveObjectFit.js:144:1)
    at Module.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at Module../src/page/orderpdf.page.js (admin.page.js:40:1)

Then I tried to insert alias as i told @ryangarde .. No errors but cannot render..

Any kind souls out there pls assist & advice.. I'm totally open to suggestions.

[boyboi86]

Ok now somehow by sheer luck I manage to install and import react-pdf without error. Using the below method.

https://blog.alchemy.com/blog/how-to-polyfill-node-core-modules-in-webpack-5

it has no problem importing after install legacy peer dep.. but totally doesn't work. Now i wish at least I get to see some error..

[boyboi86]

Hi, any updates? React 18 is it compatible ?

[kevelopment]

Hi, any updates? React 18 is it compatible ?

Does not seem to be compatible. Just started with a fresh round of create-react-app resulting in Dependencies react: 18.1.0 and react-scripts: 5.0.1 and ran into

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: my-app@0.1.0
npm ERR! Found: react@18.1.0
npm ERR! node_modules/react
npm ERR!   react@"^18.1.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.6 || ^17.0.0" from @react-pdf/renderer@2.1.1
npm ERR! node_modules/@react-pdf/renderer
npm ERR!   @react-pdf/renderer@"*" from the root project

after executing

npm install @react-pdf/renderer --save

right away unfortunately. 😞

[adamduncan]

To elaborate on @inouekun's comment, we managed to work around this with patch-package, using CRA5 and without ejecting or resorting to craco. These steps should hopefully get things rolling:

1. As per README, install all native Node modules that Webpack 5 will require. E.g.

npm install --save-dev process browserify-zlib stream-browserify util buffer assert

2. Install patch-package:

npm install --save-dev patch-package

(Worth also adding a "postinstall": "patch-package" script to your package.json scripts so patch is automatically applied for all contributors on install.)

3. Modify local react-scripts webpack.config.js (/node_modules/react-scripts/config/webpack.config.js) file with README-suggested additions (adding resolve.fallback and ProvidePlugin mappings into CRA's beast of a config file.
4. Run patch-package react-scripts (this should produce patches/react-scripts+5.0.1.patch).
5. Run npm start or npm run build to run react-scripts and confirm app is running/building with no errors and react-pdf working as intended.

Hopefully that helps some of you out there 👍

[regincastillo]

Describe the bug Since I am using create-react-app, I needed to use react-app-rewired to configure my webpack.config. This is what my config-overrides.js looks like:

const webpack = require('webpack');

module.exports = function override(config, env) {
  config.plugins = [
      new webpack.ProvidePlugin({
          Buffer: ['buffer', 'Buffer'],
          process: 'process/browser',
      }),
  ];
  config.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'),
  };

  return config;
};

Whenever I put this code

config.plugins = [
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
      process: 'process/browser',
    }),
];

on the webpack.config and start the server, it produces this error on the terminal URIError: Failed to decode param '/%PUBLIC_URL%/manifest.json'. I tried removing the %PUBLIC_URL% and it just gives me white screen with no errors.

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser: Brave
• React-pdf version: 2.1.1

try to use this

const webpack = require("webpack");
module.exports = function override(config) {

  config.resolve.fallback = {
    ...config?.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"),
    assert: require.resolve("assert"),
  };

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

  return config;
};