You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
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.
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.
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';",
The text was updated successfully, but these errors were encountered: