webpack-cli: Error when run npm start: Class constructor ServeCommand cannot be invoked without 'new'

cp ${ENV:-‘configs/env/.env.dev.devbuild’} .env && webpack --env mode=dev --env isDevServer --env NODE_ENV=local serve --config ./webpack.config.babel.js

(node:50249) UnhandledPromiseRejectionWarning: TypeError: Class constructor ServeCommand cannot be invoked without ‘new’ at run (/Users/sonlam/workspaces/octupi/raindrop/node_modules/webpack-cli/lib/utils/resolve-command.js:33:12) at Command.<anonymous> (/Users/sonlam/workspaces/octupi/raindrop/node_modules/webpack-cli/lib/utils/arg-parser.js:34:58) at Command.listener [as _actionHandler] (/Users/sonlam/workspaces/octupi/raindrop/node_modules/webpack-cli/node_modules/commander/index.js:426:31) at Command._parseCommand (/Users/sonlam/workspaces/octupi/raindrop/node_modules/webpack-cli/node_modules/commander/index.js:1002:14) at Command._dispatchSubcommand (/Users/sonlam/workspaces/octupi/raindrop/node_modules/webpack-cli/node_modules/commander/index.js:953:18) at Command._parseCommand (/Users/sonlam/workspaces/octupi/raindrop/node_modules/webpack-cli/node_modules/commander/index.js:970:12) at Command.parse (/Users/sonlam/workspaces/octupi/raindrop/node_modules/webpack-cli/node_modules/commander/index.js:801:10) at argParser (/Users/sonlam/workspaces/octupi/raindrop/node_modules/webpack-cli/lib/utils/arg-parser.js:164:27) at runCLI (/Users/sonlam/workspaces/octupi/raindrop/node_modules/webpack-cli/lib/bootstrap.js:11:24) at Object.<anonymous> (/Users/sonlam/workspaces/octupi/raindrop/node_modules/webpack-cli/bin/cli.js:24:5) (Use node --trace-warnings ... to show where the warning was created)

What is the current behavior?

package.json:

{
  "name": "xxx",
  "version": "1.25.0",
  "private": true,
  "license": "LicenseRef-LICENSE",
  "description": "xxx",
  "scripts": {
    "build": "webpack --config ./webpack.config.babel.js",
    "fix-memory-limit": "cross-env LIMIT=8192 increase-memory-limit",
    "start": "cp ${ENV:-'configs/env/.env.dev.devbuild'} .env && webpack --env mode=dev --env isDevServer --env NODE_ENV=local serve --config ./webpack.config.babel.js",
    "start:stg": "cp ${ENV:-'configs/env/.env.stg.devbuild'} .env && webpack --env mode=dev --env isDevServer --env NODE_ENV=local serve --config ./webpack.config.babel.js",
    "start:prod": "cp ${ENV:-'configs/env/.env.prod.devbuild'} .env && webpack --env mode=dev --env isDevServer --env NODE_ENV=local serve --config ./webpack.config.babel.js",
    "profile": "cp ${ENV:-'configs/env/.env.prod.prodbuild'} .env && webpack --profile --json --config ./webpack.config.babel.js > ./profile.json && webpack-bundle-analyzer ./profile.json",
    "ci": "start-server-and-test start-server http://localhost:3000 cypress-test",
    "cypress-test": "npx cypress run --headed --browser chrome",
    "test": "node --max_old_space_size=12840 ./node_modules/.bin/react-scripts test --env=jsdom",
    "format": "prettier --list-different \"src/**/*.{tsx,js,json,md,ts,yml}\"",
    "format:fix": "prettier --write \"src/**/*.{t22.1.0json,md,ts,yml}\"",
    "generate": "graphql-codegen",
    "get-version": "echo $npm_package_version",
    "next-patch": "yarn version --patch",
    "next-minor": "yarn version --minor",
    "next-major": "yarn version --major",
    "next-premajor": "yarn version --premajor",
    "next-preminor": "yarn version --preminor",
    "next-prepatch": "yarn version --prepatch",
    "next-prerelease": "yarn version --prerelease",
    "cypress": "cd ./cypress && npm i && cd ../ & node ./cypress/node_modules/.bin/cypress install & node ./cypress/node_modules/.bin/cypress open",
    "lint": "eslint 'src/**/*.{js,ts,tsx}' --quiet --fix"
  },
  "dependencies": {
    "@ag-grid-community/react": "24.1.1",
    "@ag-grid-enterprise/all-modules": "24.1.0",
    "@apollo/client": "3.3.6",
    "@auth0/auth0-spa-js": "1.13.5",
    "@date-io/date-fns": "1.3.13",
    "@emotion/react": "11.1.4",
    "@graphql-codegen/add": "2.0.2",
    "@graphql-codegen/cli": "1.20.0",
    "@graphql-codegen/typescript": "1.19.0",
    "@graphql-codegen/typescript-operations": "1.17.13",
    "@graphql-codegen/typescript-react-apollo": "2.2.1",
    "@material-ui/core": "4.11.2",
    "@material-ui/icons": "4.11.2",
    "@material-ui/lab": "4.0.0-alpha.57",
    "@material-ui/pickers": "3.2.10",
    "@mdi/font": "5.8.55",
    "@react-pdf/renderer": "1.6.12",
    "@toast-ui/react-calendar": "1.0.5",
    "@typescript-eslint/eslint-plugin": "4.11.1",
    "@typescript-eslint/parser": "4.11.1",
    "@typescript-eslint/typescript-estree": "4.11.1",
    "@ungap/global-this": "0.4.3",
    "apollo-cache-persist": "0.1.1",
    "async_hooks": "1.0.0",
    "auth0-js": "9.14.0",
    "autosuggest-highlight": "3.1.1",
    "axios": "0.21.1",
    "b64-to-blob": "1.2.19",
    "browserify-zlib": "0.2.0",
    "classnames": "2.2.6",
    "color": "3.1.3",
    "currency-symbol-map": "4.0.4",
    "d3": "6.3.1",
    "date-fns": "2.16.1",
    "docx": "5.4.1",
    "docx-templates": "4.5.3",
    "easygraphql-tester": "5.1.6",
    "email-validator": "2.0.4",
    "emojis": "1.0.10",
    "final-form": "4.20.1",
    "final-form-arrays": "3.0.2",
    "final-form-focus": "1.1.2",
    "formdata-polyfill": "3.0.20",
    "google-map-react": "2.1.9",
    "graphql": "15.4.0",
    "graphql-relay": "0.6.0",
    "graphql-tag": "2.11.0",
    "graphql-tester": "0.0.5",
    "history": "5.0.0",
    "i18next": "19.8.4",
    "i18next-browser-languagedetector": "6.0.1",
    "idb-keyval": "3.2.0",
    "is-hotkey": "0.2.0",
    "is-url": "1.2.4",
    "jest": "26.6.3",
    "jimp": "0.16.1",
    "js-search": "2.0.0",
    "mammoth": "1.4.14",
    "material-ui-phone-number": "2.2.6",
    "mui-rff": "3.0.3",
    "newsapi": "2.4.1",
    "node-sass": "4.14.1",
    "notistack": "1.0.3",
    "p-queue": "6.6.2",
    "pluralize": "8.0.0",
    "query-string": "6.13.7",
    "re-resizable": "6.9.0",
    "react": "17.0.1",
    "react-avatar-editor": "11.1.0",
    "react-beautiful-dnd": "13.0.0",
    "react-color": "2.19.3",
    "react-copy-to-clipboard": "5.0.2",
    "react-cursor-position": "3.0.3",
    "react-d3-components": "0.9.1",
    "react-dom": "17.0.1",
    "react-draggable": "4.4.3",
    "react-dropzone-uploader": "2.11.0",
    "react-easy-crop": "3.3.1",
    "react-error-boundary": "^3.1.0",
    "react-excel-renderer": "1.1.0",
    "react-fast-compare": "3.2.0",
    "react-final-form": "6.5.2",
    "react-final-form-arrays": "3.1.3",
    "react-final-form-listeners": "1.0.2",
    "react-google-recaptcha": "2.1.0",
    "react-grid-layout": "1.2.0",
    "react-helmet": "6.1.0",
    "react-i18next": "11.8.5",
    "react-imask": "6.0.5",
    "react-number-format": "4.4.1",
    "react-pdf": "5.1.0",
    "react-router": "6.0.0-beta.0",
    "react-router-config": "5.1.1",
    "react-router-dom": "6.0.0-beta.0",
    "react-router-native": "6.0.0-beta.0",
    "react-split-pane": "0.1.92",
    "react-stickynode": "3.0.4",
    "react-swipeable-views": "0.13.9",
    "react-test-renderer": "17.0.1",
    "react-transition-group": "4.4.1",
    "react-uuid": "1.0.2",
    "react-window": "1.8.6",
    "recharts": "2.0.0-beta.7",
    "rxjs": "6.6.3",
    "slate": "0.59.0",
    "slate-history": "0.59.0",
    "slate-hyperscript": "0.59.0",
    "slate-react": "0.59.0",
    "stream-browserify": "3.0.0",
    "string-similarity": "4.0.3",
    "subscriptions-transport-ws": "0.9.18",
    "url-parse": "1.4.7",
    "use-error-boundary": "2.0.4",
    "use-resize-observer": "7.0.0",
    "uuid": "8.3.2",
    "uuid-validate": "0.0.3",
    "window-or-global": "1.0.1",
    "xlsx": "0.16.9",
    "yup": "0.32.8"
  },
  "devDependencies": {
    "@babel/core": "7.12.10",
    "@babel/plugin-proposal-class-properties": "7.12.1",
    "@babel/plugin-proposal-export-default-from": "7.12.1",
    "@babel/plugin-proposal-export-namespace-from": "7.12.1",
    "@babel/plugin-proposal-object-rest-spread": "7.12.1",
    "@babel/plugin-proposal-throw-expressions": "7.12.1",
    "@babel/plugin-syntax-dynamic-import": "7.8.3",
    "@babel/plugin-transform-runtime": "7.12.10",
    "@babel/preset-env": "7.12.11",
    "@babel/preset-react": "7.12.10",
    "@babel/register": "7.12.10",
    "@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
    "@svgr/webpack": "5.5.0",
    "@teamsupercell/typings-for-css-modules-loader": "2.4.0",
    "@testing-library/dom": "7.29.0",
    "@testing-library/jest-dom": "5.11.6",
    "@testing-library/react": "11.2.2",
    "@testing-library/react-hooks": "3.7.0",
    "@testing-library/user-event": "12.6.0",
    "@types/auth0-js": "9.14.2",
    "@types/autosuggest-highlight": "3.1.1",
    "@types/chai": "4.2.14",
    "@types/classnames": "2.2.11",
    "@types/color": "3.0.1",
    "@types/d3": "6.2.0",
    "@types/element-resize-event": "2.0.0",
    "@types/google-map-react": "2.1.0",
    "@types/googlemaps": "3.43.0",
    "@types/graphql-relay": "0.6.0",
    "@types/is-hotkey": "0.1.2",
    "@types/is-url": "1.2.28",
    "@types/jest": "26.0.19",
    "@types/node": "14.14.16",
    "@types/react": "17.0.0",
    "@types/react-avatar-editor": "10.3.5",
    "@types/react-beautiful-dnd": "13.0.0",
    "@types/react-color": "3.0.4",
    "@types/react-copy-to-clipboard": "5.0.0",
    "@types/react-dom": "17.0.0",
    "@types/react-final-form-listeners": "1.0.0",
    "@types/react-grid-layout": "1.1.1",
    "@types/react-helmet": "6.1.0",
    "@types/react-pdf": "5.0.0",
    "@types/react-stickynode": "3.0.1",
    "@types/react-swipeable-views": "0.13.0",
    "@types/react-test-renderer": "17.0.0",
    "@types/react-transition-group": "4.4.0",
    "@types/recharts": "1.8.18",
    "@types/string-similarity": "4.0.0",
    "@types/uuid": "8.3.0",
    "@types/webpack-dev-server": "3.11.1",
    "@types/webpack-merge": "4.1.5",
    "@types/window-or-global": "1.0.3",
    "@types/yup": "0.29.11",
    "@typescript-eslint/eslint-plugin": "4.11.1",
    "@typescript-eslint/parser": "4.11.1",
    "autoprefixer": "10.1.0",
    "babel-eslint": "10.1.0",
    "babel-loader": "8.2.2",
    "chai": "4.2.0",
    "clean-webpack-plugin": "3.0.0",
    "copy-webpack-plugin": "7.0.0",
    "core-js": "3.8.1",
    "cross-env": "7.0.3",
    "css-loader": "5.0.1",
    "cssnano": "4.1.10",
    "dotenv-webpack": "6.0.0",
    "duplicate-package-checker-webpack-plugin": "3.0.0",
    "eslint": "7.16.0",
    "eslint-config-airbnb-base": "14.2.1",
    "eslint-config-airbnb-typescript": "12.0.0",
    "eslint-config-prettier": "7.1.0",
    "eslint-import-resolver-alias": "1.1.2",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsx-a11y": "6.4.1",
    "eslint-plugin-react": "7.21.5",
    "eslint-plugin-react-hooks": "4.2.0",
    "eslint-webpack-plugin": "2.4.1",
    "favicons-webpack-plugin": "4.2.0",
    "file-loader": "6.2.0",
    "fork-ts-checker-webpack-plugin": "6.0.8",
    "html-loader": "1.3.2",
    "html-webpack-plugin": "5.0.0-alpha.14",
    "import-sort-style-module-and-prefix": "0.1.3",
    "increase-memory-limit": "1.0.7",
    "is-windows": "1.0.2",
    "less": "4.0.0",
    "less-loader": "7.2.1",
    "lint-staged": "10.5.3",
    "mini-css-extract-plugin": "1.3.3",
    "path": "0.12.7",
    "postcss-loader": "4.1.0",
    "prettier": "2.2.1",
    "prettier-plugin-import-sort": "0.0.6",
    "pretty-quick": "3.1.0",
    "react-refresh": "0.9.0",
    "regenerator-runtime": "0.13.7",
    "resolve-url-loader": "3.1.2",
    "sass": "1.30.0",
    "sass-loader": "10.1.0",
    "style-loader": "2.0.0",
    "svg-url-loader": "7.1.1",
    "terser-webpack-plugin": "5.0.3",
    "ts-jest": "26.4.4",
    "ts-loader": "8.0.12",
    "ts-node": "9.1.1",
    "type-fest": "0.20.2",
    "typescript": "4.1.3",
    "uglify-js": "3.12.3",
    "url-loader": "4.1.1",
    "webpack": "5.11.0",
    "webpack-bundle-analyzer": "4.3.0",
    "webpack-cli": "4.2.0",
    "webpack-dev-server": "3.11.0",
    "webpack-merge": "5.7.3",
    "yargs": "16.2.0"
  },
  "importSort": {
    ".ts, .tsx": {
      "style": "module-and-prefix",
      "parser": "typescript"
    },
    ".js, .jsx": {
      "style": "module-and-prefix",
      "parser": "babylon"
    }
  },
  "browserslist": {
    "development": [
      "last 2 chrome versions",
      "last 2 firefox versions",
      "last 2 edge versions"
    ],
    "production": [
      ">5%",
      "last 4 versions",
      "Firefox ESR",
      "not ie < 11"
    ]
  },
  "jest": {
    "transform": {
      ".+\\.tsx?$": "ts-jest",
      ".+\\.ts?$": "ts-jest"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!(date-fns/esm|date-fns/local|imask)/)"
    ],
    "moduleNameMapper": {
      "\\.(css|less|scss)$": "identity-obj-proxy",
      "\\.worker.js": "<rootDir>/__mocks__/workerMock.js",
      "\\.worker.entry.js": "<rootDir>/__mocks__/workerMock.js"
    }
  }
}

Steps to reproduce the behavior:

Expected behavior

Screenshots

Please paste the results of webpack-cli info here, and mention other relevant information

nodejs: v 15.3.0

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 28
  • Comments: 18 (8 by maintainers)

Commits related to this issue

Most upvoted comments

You should update webpack-cli to the 4.3.0

Update your deps

For me it worked by deleting the node modules and reinstall it

This worked for me for now; Changing the webpack-dev-server version in the package.json file to:

"webpack-dev-server": "~3"

And then run yarn install or npm install.

Source: https://stackoverflow.com/a/69050300/2774342


P.S. This will be likely a temporary solution, while a new version is released, so for future reference (some months from now I guess) this answer will be deprecated.

This worked for me for now; Changing the webpack-dev-server version in the package.json file to:

"webpack-dev-server": "~3"

And then run yarn install or npm install.

Source: https://stackoverflow.com/a/69050300/2774342

P.S. This will be likely a temporary solution, while a new version is released, so for future reference (some months from now I guess) this answer will be deprecated.

it’s also useful for me (TypeError: Class constructor ServeCommand cannot be invoked without ‘new’ )

webpack serve --env mode=dev --env isDevServer --env NODE_ENV=local --config ./webpack.config.babel.js

Thanks a lot, @alexander-akait . It works with 4.3.1 with corrected command line.

After long attempts to allow webpack [options] server [options], I found it is impossible, there are few reasons:

  • webpack --env foo --env bar serve --hot means three variable env variables and -hot flag, i.e. { env: { foo: true, bar: true, serve: true }, hot: true}, because commander parse them https://github.com/tj/commander.js/#variadic-option
  • webpack --hot server --env foo, also impossible due --hot can be Boolean|String (i.e. --hot only) and in this case we throws error on invalid --hot value

Also we load commands lazy to reduce memory and improve performance, so we cannot analyze args to get command.

Yep, it works in some version, but only because we have bugs in parsing.

So, here two issues:

  • Class constructor ServeCommand cannot be invoked without 'new' - just update webpack-cli to the latest stable version
  • webpack --env mode=dev --env isDevServer --env NODE_ENV=local serve --config ./webpack.config.babel.js works before because we have bug in parsing arguments, now it is fixed and syntax for sub commands is webpack [command] [options].

I am sorry that some developers have the problem, hope I describe everything above, anyway feel free to feedback

Original issue should be fixed by updating webpack-cli to latest version, https://github.com/webpack/webpack-cli/issues/2272#issuecomment-752521198 require more complex logic for parsing args

But, yes we need fix it