Runtime error when using webpack-dev-server

[despian]

When running my project with webpack-dev-server I get the following runtime error:

TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    at Module.<anonymous> (/Users/matt/temp/test/node_modules/querystring-es3/encode.js:40:1)
    at Module../node_modules/querystring-es3/encode.js?babel-target=modern (http://localhost:8080/main.modern.js:3590:30)
    at __webpack_require__ (http://localhost:8080/main.modern.js:20:30)
    at Object../node_modules/querystring-es3/index.js (/Users/matt/temp/test/node_modules/querystring-es3/index.js:4:38)
    at __webpack_require__ (http://localhost:8080/main.modern.js:20:30)
    at Object../node_modules/url/url.js (/Users/matt/temp/test/node_modules/url/url.js:100:19)
    at __webpack_require__ (http://localhost:8080/main.modern.js:20:30)
    at Object../node_modules/webpack-dev-server/client/utils/createSocketUrl.js (http://localhost:8080/main.modern.js:10747:11)
    at __webpack_require__ (http://localhost:8080/main.modern.js:20:30)
    at Object.<anonymous> (http://localhost:8080/main.modern.js:10380:23)

This can be resolved by adding:

doNotTarget: [ /querystring-es3/ ]

or

babel.presetOptions.useBuiltIns: false

I'm using:

"webpack": "^4.41.5"
"webpack-babel-multi-target-plugin": "^2.3.3"
"webpack-dev-server": "^3.10.2"

I was surprised that I wasn't able to find anybody mentioning this same exact issue here or elsewhere online (maybe my google-foo is just bad). There must be many people using this plugin with webpack-dev-server which makes me think there is maybe something odd with my config.

If my config is okay then maybe I am just the first to report the issue. In which case maybe the auto filtering needs to be improved to catch querystring-es3.

My full config:

package.json

{
  "name": "test-app",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "webpack-dev-server --env development",
    "build": "webpack --env production"
  },
  "devDependencies": {
    "@webcomponents/webcomponentsjs": "^2.4.1",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.4.2",
    "ejs-loader": "^0.3.5",
    "html-loader": "^0.5.5",
    "html-webpack-deploy-plugin": "^2.0.6",
    "html-webpack-plugin": "^3.2.0",
    "to-string-loader": "^1.1.6",
    "webpack": "^4.41.5",
    "webpack-babel-multi-target-plugin": "^2.3.3",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.2",
    "webpack-merge": "^4.2.2"
  }
}

webpack.config.js

const path = require('path');
const merge = require('webpack-merge');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackDeployPlugin = require('html-webpack-deploy-plugin');
const BabelMultiTargetPlugin = require('webpack-babel-multi-target-plugin').BabelMultiTargetPlugin;
const package = require('./package.json');

const ENV = process.argv.find(arg => arg.includes('production'))
  ? 'production'
  : 'development';
const OUTPUT_PATH = path.resolve(__dirname, 'dist');

const webcomponentsjs = [
  {
    from: 'webcomponents-loader.js',
    to: 'webcomponents-loader.js'
  },
  {
    from: 'bundles/*.js',
    to: 'bundles',
    flatten: true
  }
];

const commonConfig = {
  entry: './src/index.js',
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackDeployPlugin({
      packages: {
        '@webcomponents/webcomponentsjs': {
          copy: ENV === 'development' ? webcomponentsjs : [],
          scripts: {
            useCdn: ENV === 'production',
            path: 'webcomponents-loader.js',
            append: false
          },
        }
      },
      getCdnPath: (packageName, packageVersion, packagePath) => `https://unpkg.com/${packageName}@${packageVersion}/${packagePath}`
    }),
    new BabelMultiTargetPlugin({
      babel: {
        presetOptions: {
          // Don’t add polyfills, they are provided from webcomponents-loader.js
          useBuiltIns: false
        }
      }
    })
  ],
  output: {
    path: OUTPUT_PATH
  },
  resolve: {
    mainFields: [
      'es2015',
      'module',
      'main'
    ]
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          BabelMultiTargetPlugin.loader()
        ]
      },
      {
        test: /\.css$/,
        use: [
          'to-string-loader',
          'css-loader'
        ]
      },
      {
        test: /\.html$/i,
        loader: 'html-loader'
      },
      {
        test: /\.ejs$/,
        use: [
          'ejs-loader'
        ]
      }
    ]
  }
};

const developmentConfig = {
  output: {
    filename: '[name].js'
  },
  devtool: 'inline-source-map',
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/nly-dev-wrapper.ejs',
      templateParameters: {
        appSelector: package.name
      }
    })
  ],
  devServer: {
    contentBase: './dist',
    host: '0.0.0.0',
    disableHostCheck: true
  }
};

const productionConfig = {
  output: {
    filename: '[name].[chunkhash:8].js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.ejs',
      templateParameters: {
        appSelector: package.name
      },
      minify: {
        collapseWhitespace: true,
        removeComments: true,
        minifyCSS: true,
        minifyJS: true
      }
    })
  ]
};

module.exports = () => {
  if (ENV === 'production') {
    return merge(productionConfig, commonConfig, { mode: ENV });
  }
  return merge(developmentConfig, commonConfig, { mode: ENV });
};

Update:

So I don't think it's anything funky with my config. I was able to reproduce the issue in this minimal setup:

https://codesandbox.io/s/webpack-babel-multi-target-pluginwebpack-dev-servertest-vq79w

You need to open the server output in its own browser tab/window in order to see the error in the console for some reason. A bug with the embedded browser window I guess.