S
S
Sergey2021-03-01 20:23:45
Internet Explorer
Sergey, 2021-03-01 20:23:45

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" не определено


Can you please tell me what polyfills should be used to fix these errors?

webpack config:
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 question

Ask a Question

731 491 924 answers to any question