diegomura / react-pdf

📄 Create PDF files using React
https://react-pdf.org
MIT License
14.95k stars 1.19k forks source link

Pako/zlib and yoga errors in Webpack 5 #2663

Open harrismcc opened 8 months ago

harrismcc commented 8 months ago

Describe the bug When I try to use react-pdf in my react app, I get the following error messages from Webpack (5.76.2). Using react 17.0.2, and babel/core 7.14.2. I'm including the polyfill for browserify-zlip in my webpack config, but it's still having these issues.

ERROR in ./.yarn/unplugged/yoga-layout-npm-2.0.1-d25883a49a/node_modules/yoga-layout/src/generated/YGEnums.ts 10:7
Module parse failed: Unexpected token (10:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| // @generated by enums.py
| 
> export enum Align {
|   Auto = 0,
|   FlexStart = 1,

ERROR in ./.yarn/cache/@react-pdf-pdfkit-npm-3.1.6-f77387c17f-f81f65d623.zip/node_modules/@react-pdf/pdfkit/lib/pdfkit.browser.js 3:0-52
Module not found: Error: Can't resolve 'pako/lib/zlib/zstream.js' in '/workspaces/main/.yarn/cache/@react-pdf-pdfkit-npm-3.1.6-f77387c17f-f81f65d623.zip/node_modules/@react-pdf/pdfkit/lib'

ERROR in ./.yarn/cache/@react-pdf-pdfkit-npm-3.1.6-f77387c17f-f81f65d623.zip/node_modules/@react-pdf/pdfkit/lib/pdfkit.browser.js 4:0-50
Module not found: Error: Can't resolve 'pako/lib/zlib/deflate.js' in '/workspaces/main/.yarn/cache/@react-pdf-pdfkit-npm-3.1.6-f77387c17f-f81f65d623.zip/node_modules/@react-pdf/pdfkit/lib'

ERROR in ./.yarn/cache/@react-pdf-pdfkit-npm-3.1.6-f77387c17f-f81f65d623.zip/node_modules/@react-pdf/pdfkit/lib/pdfkit.browser.js 5:0-52
Module not found: Error: Can't resolve 'pako/lib/zlib/inflate.js' in '/workspaces/main/.yarn/cache/@react-pdf-pdfkit-npm-3.1.6-f77387c17f-f81f65d623.zip/node_modules/@react-pdf/pdfkit/lib'

ERROR in ./.yarn/cache/@react-pdf-pdfkit-npm-3.1.6-f77387c17f-f81f65d623.zip/node_modules/@react-pdf/pdfkit/lib/pdfkit.browser.js 6:0-54
Module not found: Error: Can't resolve 'pako/lib/zlib/constants.js' in '/workspaces/main/.yarn/cache/@react-pdf-pdfkit-npm-3.1.6-f77387c17f-f81f65d623.zip/node_modules/@react-pdf/pdfkit/lib'

webpack 5.76.2 compiled with 5 errors in 33408 ms

To Reproduce In my webpack config, I have the following for resolve (note, there is other stuff in there for other libraries)

  resolve: {
    fallback: {
      stream: require.resolve('stream-browserify'),
      vm: require.resolve('vm-browserify'),
      punycode: require.resolve('punycode/'),
      util: require.resolve('util/'),
      os: require.resolve('os-browserify/browser'),
      crypto: require.resolve('crypto-browserify'),
      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'),
    },
    // need to use require.resolve to ensure that only one instance of these are
    // loaded/bundled
    alias: {
      'styled-components': require.resolve(`styled-components`),
      'react-redux': require.resolve(`react-redux`),
    },
  },

Desktop (please complete the following information):

Yukigamine commented 8 months ago

I was running into this issue and had to manually install pako.

Aldar-Bazarov commented 7 months ago

Hello! Did you solve the problem after all? I'm facing the same thing :(

chrishoward commented 6 months ago

@harrismcc Did you manage to resolve this issue?

alivtar commented 5 months ago

Same problem here. Any updates for this?

markcnunes commented 3 months ago

This issue seems similar to https://github.com/diegomura/react-pdf/issues/2335. Even though Babel isn't mentioned, it might be useful to look at the solution there.

Installing pako fixed the issue for me initially, but I think using packageExtensions from #2335 is a better solution. It shows why pako is needed by fixing missing dependencies. Installing pako alone might be confusing for other developers since it isn’t used directly in the code.