React-pdf: fs.readFileSync is not a function

[Neo478]

OS:
Ubuntu 17

React-pdf version:
0.7.5

Description:
When using the readme snippet, Webpack raised errors about "fs", "net" and "tls".
Adding
node: { fs: 'empty', net: 'empty', tls: 'empty', },
In webpack config fixes the raised error. But Chrome console raised another one: "fs.readFileSync is not a function"
This can be related to the os or Browserify/Webpack.

[rpanczer]

I am getting the same error..

[rogierslag]

Probably you are using the node instead of the browser package?

[diegomura]

@Neo478 you will need to use the transform-loader temporarily since we fix pdfkit. Are you setting up you webpack config that way? Adding the node config is not enough.

I'll recommend you to take a look at how the REPL project is set up

[ukasa]

If you're using create-react-app boilerplate, try this steps:

1. Install transform-loader by running npm i transform-loader --save or yarn add transform-loader.
2. Set up your webpack config. You can find it in ./node_modules/react-scripts/config/webpack.config.dev.js.

module.exports = {
   ...
   module: {
      ...
      rules: [
         // You can put these codes in the beginning
         {
           test: /(pdfkit|linebreak|fontkit|unicode|brotli|png-js).*\.js$/,
           loader: 'transform-loader?brfs',
         },
         {
           test: /\.pdf$/,
           loader: 'url-loader',
         },
         ...
      ],
      ...
   },
   ...
};

[sktwentysix]

@ukasyah3008 Any way to do this without ejecting?

[diegomura]

I don't think so. Those configs are mandatory for the moment

[LivioGama]

By luck, I was using Ant Design which kind of force you to use react-app-rewire, a plugin to use custom config without ejecting : https://ant.design/docs/react/use-with-create-react-app#Advanced-Guides

I just needed to add the following in config-overrides.js :

const {injectBabelPlugin} = require('react-app-rewired')

module.exports = function override (config, env) {
   // Config for react-pdf
   const reactPDFRule = {
    test: /(pdfkit|linebreak|fontkit|unicode|brotli|png-js).*\.js$/,
    loader: 'transform-loader?brfs',
  }
  config.module.rules = [...config.module.rules, reactPDFRule]
  // end of config for react-pdf
  config = injectBabelPlugin(['import', {libraryName: 'antd', libraryDirectory: 'es', style: 'css'}], config)
  return config
}

[qasimalbaqali]

@ukasa thank you!