EvalError in webpack build while importing @react-pdf/renderer in my node-react application

[sktanwar2014]

import @react-pdf/renderer in node/react application working fine in development but when i build for production, its throwing error on that page where it imported

webpack.base.config
webpack.base.config.txt
/* eslint-disable */
const path = require('path');
const webpack = require('webpack');
const { merge } = require("webpack-merge");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

const APP_DIR = path.resolve(__dirname, '../src');

module.exports = env => {
const { PLATFORM, VERSION } = env;
return merge([
{
entry: ['@babel/polyfill', APP_DIR],
resolve: {
extensions: [".ts", ".tsx", ".js", ".jsx"],
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader'
}
],
},
{
test: /.tsx?$/,
use: [
{
loader: "ts-loader"
}
]
},
{
test: /.(scss|css)$/,
use: [
PLATFORM === 'production' ?
MiniCssExtractPlugin.loader
:
'style-loader', 'css-loader', 'sass-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: './index.html'
}),
new webpack.DefinePlugin({
'process.env.VERSION': JSON.stringify(env.VERSION),
'process.env.PLATFORM': JSON.stringify(env.PLATFORM)
}),
new CopyWebpackPlugin(
{
patterns: [
{ from: 'src/static' },
]
},
),
new NodePolyfillPlugin()
],
output: {
filename: '[name].bundle.js',
chunkFilename: '[name].chunk.bundle.js',
path: path.resolve(__dirname, '..', 'dist'),
publicPath: '/',
clean: true
},
}
])
};

webpack.prod.config
webpack.prod.config.txt
/* eslint-disable */
const webpack = require('webpack');
const { merge } = require('webpack-merge');

// Plugins
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const WebpackShellPluginNext = require('webpack-shell-plugin-next');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const WebpackAssetsManifest = require('webpack-assets-manifest');

// Configs
const baseConfig = require('./webpack.base.config');

const prodConfiguration = env => {
return merge([
{
optimization: {
runtimeChunk: 'single',
emitOnErrors: true,
splitChunks: {
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name: 'vendors',
chunks: 'all'
}
}
},
minimize: false,
minimizer: [
new TerserPlugin(),
new CssMinimizerPlugin(),
],
},
// devtool: 'cheap-module-source-map',
plugins: [
new CleanWebpackPlugin(),
// new webpack.EvalSourceMapDevToolPlugin({
// exclude: ['vendors.js'],
// }),
new WebpackManifestPlugin({
fileName: 'webpack-manifest.json'
}),
new WebpackAssetsManifest(),
new MiniCssExtractPlugin(),
new BundleAnalyzerPlugin({
analyzerMode: 'server',
analyzerPort: 8181,
generateStatsFile: true,
statsFilename: 'statistics.html',
logLevel: "info"
}),
new WebpackShellPluginNext({
onBuildStart:{
scripts: ['echo "===> Starting packing with WEBPACK 5"'],
blocking: true,
parallel: false
},
onBuildEnd:{
scripts: ['cd server && nodemon index.js'],
blocking: false,
parallel: true
}
})
],
},
]);
}

module.exports = env => {
return merge(baseConfig(env), prodConfiguration(env));
}

.babelrc
babelrc.txt
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript",
"@babel/preset-flow"
],
"plugins": [
"@babel/plugin-transform-runtime",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-throw-expressions",
"@babel/plugin-proposal-optional-chaining",
["@babel/plugin-proposal-decorators", { "legacy": true }]
]
}

build scrip:
webpack --mode production --config config/webpack.prod.config.js --env PLATFORM=production --env VERSION=production --progress

also inclue this line in manifest.json
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self';",

[sktanwar2014]

still waiting ?

[tobua]

Error is due to a missing Content-Security-Policy header required for the blob preview once outside localhost. Adding it to the manifest will not add a header I guess.

Try adding it to the .htaccess file on your server.

Header add Content-Security-Policy "default-src 'self' 'unsafe-eval' 'unsafe-inline' blob:"

or configure the server to send the header.

I remember adding the header with version 1 of the plugin where I loaded the polyfills from an external source. In this updated example the preview seems to work without the header.

[jeetiss]

Hello, I'm going to close this issue because it duplicates #510