Всем привет!
В ИЕ 11 не прогружается сайт и выдает следующие ошибки:
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,
},
},
};