Webpack-dev-server: Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

[xgqfrms]

Uncaught TypeError: Cannot assign to read only property 'exports' of object'#<Object>'

webpack:///node_modules/webpack-dev-server/client/clients/BaseClient.js?e917

• Operating System: macOS 10.14.6
• Node Version: 12. v12.18.0
• NPM Version: 6.14.4
• webpack Version: 4.12.0
• webpack-dev-server Version: 3.1.4
• Browser: Chrome Version 85.0.4164.0 (Official Build) canary (64-bit)

This is a bug

Code

https://github.com/littlematch0123/blog-client/blob/master/build/webpack.dev.conf.js

// webpack.config.js

// additional code, remove if not needed.

Expected Behavior

no error

Actual Behavior

crashed

For Bugs; How can we reproduce the behavior?

$ git clone https://github.com/littlematch0123/blog-client

$ yarn

$ npm run dev

# open http://localhost:8888/

For Features; What is the motivation and/or use-case for the feature?

[xgqfrms]

{
  "name": "blog-client",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "xgqfrms",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build:client": "node build/build.js",
    "build:server": "cross-env NODE_ENV=production webpack --config build/webpack.server.conf.js --progress --hide-modules",
    "build": "rimraf dist && npm run build:client && npm run build:server",
    "lintcss": "stylelint **/*.vue"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "html-minifier": "^3.5.16",
    "marked": "^0.4.0",
    "vue": "^2.5.2",
    "vue-lazyload": "^1.2.6",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^8.2.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.5.1",
    "cross-env": "^5.2.0",
    "css-loader": "^0.28.11",
    "eslint": "^4.15.0",
    "eslint-config-airbnb-base": "^12.1.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.11",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.0",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^4.0.2",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-cssnext": "^3.1.0",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-syntax": "^0.28.0",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "stylelint": "^9.1.3",
    "stylelint-config-standard": "^18.2.0",
    "stylelint-order": "^0.8.1",
    "sw-precache-webpack-plugin": "^0.11.5",
    "uglifyjs-webpack-plugin": "^1.2.5",
    "url-loader": "^1.0.1",
    "vue-loader": "^14.2.2",
    "vue-server-renderer": "^2.5.16",
    "vue-style-loader": "^3.0.1",
    "vue-styled-components": "^1.2.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^4.12.0",
    "webpack-bundle-analyzer": "^2.13.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4",
    "webpack-merge": "^4.1.3",
    "webpack-node-externals": "^1.7.2"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

[alexander-akait]

Please create minimum reproducible test repo

[xgqfrms]

https://github.com/littlematch0123/blog-client

[Almansad]

The same thing happened to me when trying to update a project generated with old vue-cli from Webpack 3 to 4.
In the _build/webpack.base.conf.js_ file you have to remove the include in the loader from babel to webpack-dev-server

Berfore

```
{
test: /.js$/,
loader: 'babel-loader',
include: [
resolve('src'),
resolve('test'),
resolve('node_modules/webpack-dev-server/client') <--- delete disline
]
}

> After

  {
    test: /\.js$/,
    loader: 'babel-loader',
    include: [
      resolve('src'),
      resolve('test')
    ]
  }

```
and update webpack-dev-server to 3.11.0 in package.json

[alexander-akait]

Thank you for creating this issue. However, issues need to follow one of our templates so that we can clearly understand your particular circumstances.

Please help us help you by recreating the issue using one of our templates.

Answer above