盖茨比 + React-pdf答案

【问题标题】：Gatsby + React-pdf盖茨比 + React-pdf
【发布时间】：2022-08-19 02:03:58
【问题描述】：

我试图让 react-pdf 在 gatsby 中工作，但我的 webpack 配置有些问题。从不同的帖子尝试了不同的方法，但似乎没有任何效果。

如果我删除 \'process/browser\'，则站点构建良好，但 PDF 不呈现，并且我收到未定义进程的错误。如果我把它留在里面，该站点将根本无法构建。

/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\"
      })
    ]
  });
};

我还尝试将进程/浏览器部分移动到阶段检查中：

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

但这似乎也不起作用：/

我觉得我只需要在这里稍微调整一下，但对于我的生活，我无法弄清楚是什么。有任何想法吗？

标签： reactjs gatsby react-pdf

【解决方案1】：

找到了丢失的东西.. 必须为加载程序添加更安全的缓冲区：

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

【讨论】：

【解决方案2】：

嗨@Martin，你能告诉我如何在 Gatsby JS 中使用 React PDF 吗？我无法找到资源并继续收到“模块解析错误”的错误

谢谢

【讨论】：