4.0.0-beta.0 runtime.js and log.js doesn't being compiled to browserslist config

[chrisands]

• Operating System:
• Node Version: 15.3.0
• NPM Version: 7.0.14
• webpack Version: 5.9.0
• webpack-dev-server Version: 4.0.0-beta.0
• Browser: ie11

• This is a bug
• This is a modification request

Code

webpack config

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const Dotenv = require('dotenv-webpack')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const { resolve } = require('path')
const webpack = require('webpack')
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
const { resolve } = require('path')

module.exports = {
  mode: 'development',
  context: resolve(__dirname, 'src'),
  entry: [
    'core-js/stable',
    'regenerator-runtime/runtime',
    'whatwg-fetch',
    'react-app-polyfill/ie11',
    './index',
  ],
  output: {
    path: resolve(__dirname, 'dist'),
    filename: '[name].js',
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.(t|j)sx?$/,
        include: [resolve(__dirname, 'src')],
        use: [
          {
            loader: 'babel-loader',
            options: {
              plugins: [require.resolve('react-refresh/babel')],
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new Dotenv(),
    new webpack.ProgressPlugin(),
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      title: 'Exapmle',
      filename: 'index.html',
      template: './index.html',
      baseHref: '/',
    }),
new ReactRefreshWebpackPlugin(),
  ],
  optimization: {
    runtimeChunk: 'single',
  },
  devServer: {
    static: {
      watch: false,
    },
    dev: {
      publicPath: '/',
    },
    compress: true,
    port: 8000,
    host: '0.0.0.0',
    historyApiFallback: true,
    transportMode: 'sockjs',
  },
  devtool: 'eval-source-map',
}

babel.config.js

module.exports = (api) => {
  return {
    plugins: [
      'syntax-dynamic-import',
      [
        '@babel/plugin-transform-react-jsx',
        {
          runtime: 'automatic',
        },
      ],
      '@babel/plugin-transform-arrow-functions',
    ],
    presets: [
      [
        '@babel/preset-env',
        {
          targets: {
            ie: '11',
          },
          useBuiltIns: 'usage',
          shippedProposals: true,
          corejs: {
            version: '3.8',
            proposals: true,
          },
        },
      ],
      [
        '@babel/preset-react',
        {
          development: api.env('development'),
          runtime: 'automatic',
        },
      ],
      [
        '@babel/preset-typescript',
        {
          allExtensions: true,
          allowDeclareFields: true,
          isTSX: true,
        },
      ],
    ],
  }
}

.browserslistrc

> 0.5%
last 2 versions
ie >= 11
not dead

Expected Behavior

App should work okay

Actual Behavior

White screen with errors in console

SCRIPT1002: Syntax error
runtime.js (9,14)
SCRIPT5009: 'Symbol' is undefined
log.js (1, 27146)

How can we reproduce the behavior?

I think any apps runtime.js and log.js files shouldn't be compiled. I'll try to provide with repository later.

[chrisands]

Also should point that in chrome sockjs doesn't seem to work. After 2-3 requests, it throws an error. Probably should create another issue.

[alexander-akait]

Close in favor #2904, problems with client, will be fixed in near future