NextJS 中 react-pdf 的 Webpack 配置答案

【问题标题】：Webpack configuration for react-pdf in a Next.js projectNextJS 中 react-pdf 的 Webpack 配置
【发布时间】：2022-01-14 10:32:23
【问题描述】：

我在 NextJS 中使用 react-pdf 库生成 PDF、查看 PDF 并在静态客户端 NextJS 应用程序中下载该 PDF（不涉及服务器）。但是我无法为 NextJS 设置 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
  },
}

【问题讨论】：

标签： javascript reactjs typescript webpack next.js

【解决方案1】：

尝试使用next.config.js 的这种设置：

module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // Important: return the modified config
     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
  },
}

【讨论】：

非常感谢它确实有效，看来我从现在开始必须学习 Webpack ?
很高兴我能帮上忙！这可能需要一些时间，但是是的，这是值得的。

【解决方案2】：

尝试将 setupProxy.js 文件放在 src 目录中。它的内容

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app, req, res) {

const options = {
    target: 'http://serverurl.com',
    changeOrigin: true,
    pathRewrite: function(path, req){
        // console.log('path BEFORE trans: %o', path);
        const p = path.replace('/api', '');
        // console.log('current_path: %o', p);
        // if(path.indexOf('manage') !== -1){
        //     p = '/web-module-backend'+p;
        // }
        // console.log('PATH: %o', p);
        return p;
    },
    onProxyRes: (proxyRes, req, res) => {
        // log original request and proxied request info
        const exchange = `[${req.method}] [${proxyRes.statusCode}] ${req.path} -> ${proxyRes.req.protocol}//${proxyRes.req.host}${proxyRes.req.path}`;
        // console.log(req.headers);
        // console.log(proxyRes.headers);
        console.log(exchange); // [GET] [200] / -> http://www.example.com
        console.log('Req URL: ' + req.originalUrl);
        console.log('Response status code: ' + proxyRes.statusCode);
        res.headers = proxyRes.headers;
    },
    onProxyReq: (proxyReq, req, res) => {
        Object.defineProperty(proxyReq, 'headers', {
            get(){
                return {
                    host: 'http://urlserver.com',
                    authorization: 'Authstring', // req.headers.authorization,
                }
            },
            set(){

            }
        })
        console.log(proxyReq.headers);
    },
    onError: (err, req, res, target) => {
        console.log(err);
    }
}

const uiProxy = createProxyMiddleware(options)

app.use(
    '/api',
    uiProxy
);

};

【讨论】：