Gatsby + React-pdf - reactjs

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()
}
]
}
});