[英]Webpack configuration for react-pdf in a Next.js project
Im using react-pdf
library in Next.js to generate PDF, view PDF and download that PDF in a Static Client Side Next.js Application (Server is not involved). Im using react-pdf
library in Next.js to generate PDF, view PDF and download that PDF in a Static Client Side Next.js Application (Server is not involved). But I can't set up the Webpack for Next.js as I don't have much knowledge about it.但我无法为 Next.js 设置 Webpack,因为我对此知之甚少。
This is what the required setup for Webpack is for react-pdf
:这是 Webpack 所需的设置是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',
}),
],
/* ... */
}
And this is the next.config.js
:这是next.config.js
:
module.exports = {
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
// Important: return the modified config
return config
},
}
That config
parameter that next.config.js
gives us is like that objet we export in a normal webpack.config.js
. next.config.js
给我们的config
参数就像我们在普通的webpack.config.js
中导出的那个对象。 Try with this setup of next.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;
},
};
Try to place setupProxy.js file in src directory.尝试将 setupProxy.js 文件放在 src 目录中。 It content它的内容
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
);
}; };
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.