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

Created on 29 Dec 2020 · 13Comments · Source: webpack/webpack-cli

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. (/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. (/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

Bug

Source

lamqson

👍10 ❤1

Most helpful comment

You should update webpack-cli to the 4.3.0

alexander-akait on 29 Dec 2020

🎉6 👍4 😄1

All 13 comments

Please update all deps (check global too), we don't have webpack-cli/lib/utils/resolve-command.js, just check it

alexander-akait on 29 Dec 2020

You should update webpack-cli to the 4.3.0

alexander-akait on 29 Dec 2020

🎉6 👍4 😄1

You should update webpack-cli to the 4.3.0

Thanks @alexander-akait. When I tried 4.3.0 I got this issue:

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

[webpack-cli] Running multiple commands at the same time is not possible
[webpack-cli] Found commands: 'bundle', 'serve'
[webpack-cli] Run 'webpack --help' to see available commands and options
npm ERR! code 2
npm ERR! path /Users/sonlam/workspaces/octupi/raindrop
npm ERR! command failed
npm ERR! command sh -c cp ${ENV:-'configs/env/.env.dev.devbuild'} .env && webpack --env mode=dev --env isDevServer --env NODE_ENV=local serve --config ./webpack.config.babel.js

Please, advice.

Thanks.

lamqson on 29 Dec 2020

Change:

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

Syntax - webpack [command] [options]

alexander-akait on 30 Dec 2020

But, yes we need fix it

alexander-akait on 30 Dec 2020

What are the steps to reproduce this behavior?

snitin315 on 2 Jan 2021

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

alexander-akait on 3 Jan 2021

👍1

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.

lamqson on 4 Jan 2021

👍1

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

alexander-akait on 13 Jan 2021

👍1

I have the latest version with webpack 4 and I have the same error. I can bundle the app with no problem with "dev": "webpack --config build/webpack.dev.conf.js". What am I missing?

````json

"devDependencies": {
"@webpack-cli/serve": "^1.2.2",
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.6",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-istanbul": "^4.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",
"babel-register": "^6.22.0",
"chai": "^4.1.2",
"chalk": "^2.0.1",
"chromedriver": "^83.0.1",
"copy-webpack-plugin": "^4.0.1",
"cross-env": "^5.0.1",
"cross-spawn": "^5.0.1",
"css-loader": "^0.28.11",
"dotenv-webpack": "^6.0.0",
"eslint": "^7.18.0",
"eslint-config-prettier": "^6.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.7.1",
"eslint-webpack-plugin": "^2.4.3",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^4.5.1",
"inject-loader": "^3.0.0",
"karma": "^1.4.1",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-phantomjs-shim": "^1.4.0",
"karma-sinon-chai": "^1.3.1",
"karma-sourcemap-loader": "^0.3.8",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.2",
"miragejs": "^0.1.41",
"mocha": "^3.2.0",
"nightwatch": "^1.5.1",
"node-notifier": "^5.1.2",
"node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"phantomjs-prebuilt": "^2.1.14",
"portfinder": "^1.0.28",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"prettier": "^2.2.1",
"rimraf": "^2.6.0",
"sass-loader": "^8.0.2",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"sinon": "^4.0.0",
"sinon-chai": "^2.8.0",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^4.2.3",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^15.9.6",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.6.12",
"webpack": "^4.44.2",
"webpack-bundle-analyzer": "^4.4.0",
"webpack-merge": "^4.1.0"
},