javascript - 在 Next.js 项目中为 react-pdf 配置 Webpack

我在 Next.js 中使用 react-pdf 库来生成 PDF、查看 PDF 并下载该 PDF（这是一个静态客户端 Next.js 应用程序，不涉及服务器）。但我无法为 Next.js 设置 Webpack，因为我对它了解不多。

这就是 react-pdf 所需的 Webpack 设置：

const webpack = require('webpack')

module.exports = {
  /* ... */

  resolve: {
    fallback: {
      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',
    }),
  ],

  /* ... */
}

这就是 next.config.js：

module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // Important: return the modified config
    return config
  },
}

答案＃1

那个 config 参数是 next.config.js 提供给我们的，就像我们在普通的 webpack.config.js 中导出的对象一样。试试这个 next.config.js 的设置:

module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    config.resolve.fallback = {
      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"),
    };
    config.plugins.push(
      new webpack.ProvidePlugin({
        Buffer: ["buffer", "Buffer"],
        process: "process/browser",
      })
    );
    return config;
  },
};