Gatsby + React-pdf

Question

I'm trying to get react-pdf to work in gatsby and something is wonky with my webpack config. Tried different ways from different posts but nothing seems to do the trick.

if I remove 'process/browser', the site builds fine but the PDF doesn't render and I get the error that process is not defined. If I leave it in, the site won't build at all.

/gatsby-node.js

const webpack = require("webpack");

exports.onCreateWebpackConfig = ({ stage, loaders, actions, plugins }) => {
    if (stage === "build-html" || stage === "develop-html") {
        actions.setWebpackConfig({
          module: {
            rules: [
              {
                test: /react-pdf/, // check /pdfjs-dist/ too
                use: loaders.null()
              },
              {
                test: /pdfjs-dist/, // check /pdfjs-dist/ too
                use: loaders.null()
              }
            ]
          }
        });
      }
  actions.setWebpackConfig({
    resolve: {
      fallback: {
        module: "empty",
        dgram: "empty",
        dns: "mock",
        fs: "empty",
        http2: "empty",
        net: "empty",
        tls: "empty",
        child_process: "empty",
        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")
      }
    },
    plugins: [
      new webpack.ProvidePlugin({
        Buffer: ["buffer", "Buffer"],
        process: "process/browser"
      })
    ]
  });
};

I've also tried moving the process/browser part into the stage check:

...
if (stage === "build-html" || stage === "develop-html") {
    actions.setWebpackConfig({
      plugins: [
        new webpack.ProvidePlugin({
          process: "process/browser"
        })
      ]
    });
  }
...

but that doesn't seem to work either :/

I feel like I just need a little tweak here but for the life of me I can't figure out what. Any ideas?

Answer 1

Found the missing thing.. Had to add safer-buffer to the loaders:

actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /safer-buffer/,
            use: loaders.null()
          }
        ]
      }
    });