Answer the question
In order to leave comments, you need to log in
IE11 began to throw bundle errors and the site is not displayed, what is the reason?
Hello!
In IE 11, the site does not load and gives the following errors:
SCRIPT5009: "Promise" не определено
SCRIPT5022: SecurityError
SCRIPT5009: "ReactDOM" не определено
const path = require('path');
const rimraf = require('rimraf');
const webpack = require('webpack');
const browserslist = require('browserslist');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const WriteFilePlugin = require('write-file-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
/* All around project code analysis */
// const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
// ===
const CompressionPlugin = require('compression-webpack-plugin');
/* Uncomment when PWA works will start */
// const WorkboxPlugin = require('workbox-webpack-plugin');
// const WebpackPwaManifest = require('webpack-pwa-manifest');
// ===
// const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
let Visualizer;
const isProduction = process.env.NODE_ENV !== 'development'; // either production or server
const isServer = process.env.RUN_ENV === 'server';
const isDebug = process.env.DEBUG === 'true';
// const isHMR = !isProduction && !isServer;
const isHMR = !!process.argv.find(v => v.includes('webpack-dev-server'));
if (isDebug) {
Visualizer = require('webpack-visualizer-plugin');
process.traceDeprecation = true;
}
/**
* build folder will be deleted on server build crash or cancel,
* this is required to exit full-server mode
* by simply turning off start:server process
*/
if (isServer) {
const exitHandler = () => rimraf.sync('build');
process.on('SIGINT', exitHandler); // catches ctrl+c event
process.on('uncaughtException', exitHandler); // catches uncaught exceptions
}
/** each js piece of code requires babel-loader, so this is reusable piece of code */
const babelLoader = {
loader: 'babel-loader',
options: {
cacheDirectory: true,
plugins: isHMR ? ['react-hot-loader/babel'] : [],
},
};
const patchedReactDom = '@hot-loader/react-dom';
module.exports = {
entry: isServer ? {
server: [
patchedReactDom,
/** server requires react-dom-server */
path.resolve(__dirname, './src/utils/react-dom-server'),
/** for server we just use all polyfills */
'@babel/polyfill',
/** application code should come last */
path.resolve(__dirname, './src/styles/styles.pcss'),
path.resolve(__dirname, './src/pages'),
path.resolve(__dirname, './src'),
],
} : {
bundle: [
'react-hot-loader/patch',
patchedReactDom,
/** client polyfills */
'core-js/stable/promise',
'whatwg-fetch',
/** application code should come last */
path.resolve(__dirname, './src/styles/styles.pcss'),
path.resolve(__dirname, './src/pages'),
path.resolve(__dirname, './src'),
],
raven: path.resolve(__dirname, './src/utils/raven/index.cjs'),
'raven-qp-monkeypatch': path.resolve(__dirname, './src/utils/raven/raven-qp-monkeypatch'),
},
output: {
filename: '[name].js',
publicPath: isProduction && !isServer ? './' : '/build/',
path: path.resolve(__dirname, './build'),
},
resolve: {
extensions: ['.js', '.jsx'],
modules: ['node_modules', 'src'],
symlinks: false,
},
module: {
rules: [
{
test: require.resolve('./src/pages'),
use: [
babelLoader,
],
},
{
test: require.resolve('./src'),
use: [
babelLoader,
],
},
{
test: /\.jsx?$/,
use: [
babelLoader,
],
include: [
path.resolve(__dirname, './src'),
],
},
{
test: require.resolve('react'),
use: [
{ loader: 'expose-loader', options: 'React' },
],
},
{
test: require.resolve(patchedReactDom),
use: [
{ loader: 'expose-loader', options: 'ReactDOM' },
],
},
{
test: require.resolve('./src/utils/raven/index.cjs'),
use: [
{ loader: 'expose-loader', options: 'Raven' },
babelLoader,
],
},
...isServer ? [{
test: require.resolve('./src/utils/react-dom-server'),
use: [
{ loader: 'expose-loader', options: 'ReactDOMServer' },
],
}] : [],
{
test: /\.p?css$/,
use: ExtractTextPlugin.extract({
...isHMR ? {
fallback: 'style-loader',
} : {},
use: [
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
localIdentName: '[folder]_[local]_[hash:base64:4]',
},
},
{ loader: 'postcss-loader' },
],
}),
},
{
test: /\.(woff|woff2|ttf|png|jpg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 4096,
name: 'assets/[name].[ext]?ver=[hash:base64:10]',
},
},
],
},
{
test: /\.svg$/,
use: [{ loader: 'svg-react-loader' }],
},
],
},
plugins: [
// ...(isHMR ? [
// new webpack.HotModuleReplacementPlugin({ multiStep: true }),
// new webpack.NamedModulesPlugin(),
// ] : []),
...(!isProduction && isServer ? [
new WriteFilePlugin(),
] : []),
// new webpack.NoEmitOnErrorsPlugin(),
new ExtractTextPlugin({
filename: '[name].css',
disable: isHMR, // do not extract css in development
}),
new CopyWebpackPlugin([
path.resolve(__dirname, './src/utils/checkWebCrawler.js'),
]),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: isProduction && !isDebug ? "'production'" : "'development'",
RUN_ENV: isServer ? "'server'" : "'client'",
SUPPORTED_BROWSERS: `'${browserslist(['> 0.5%', 'last 2 versions', 'not dead']).join('|')}'`,
},
}),
...(isDebug ? [
new Visualizer({
filename: `./stats.${process.env.RUN_ENV}.htm`,
}),
] : []),
...(isProduction && !isServer ? [
new CompressionPlugin(),
// new BundleAnalyzerPlugin(),
] : []),
],
devtool: isProduction || isServer ? 'source-map' : false,
stats: {
children: false,
chunks: false,
colors: true,
},
...isServer ? {
optimization: {
minimizer: [
new UglifyJSPlugin({
uglifyOptions: { compress: { drop_console: true } },
}),
],
},
} : {},
devServer: {
hot: true,
port: 8081,
overlay: true,
headers: { 'Access-Control-Allow-Origin': '*' },
stats: {
children: false,
chunks: false,
colors: true,
},
},
};
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question