Estoy usando la biblioteca react-pdf en Next.js para generar PDF, ver PDF y descargar ese PDF en una aplicación Next.js del lado del cliente estático (el servidor no está involucrado). Pero no puedo configurar Webpack para Next.js porque no tengo mucho conocimiento al respecto.
Esta es la configuración requerida para Webpack para react-pdf :
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', }), ], /* ... */ } Y este es el next.config.js :
module.exports = { webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => { // Important: return the modified config return config }, }Ese parámetro de config que nos da next.config.js es como ese objeto que exportamos en un webpack.config.js normal. Pruebe con esta configuración de 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; }, };Intente colocar el archivo setupProxy.js en el directorio src. contenido
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 );};