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
- added @webpack-cli/serve@1.1.0 package due this issue https://github.com/webpack/webpack-cli/issues/2272 — committed to glook/webpack-typescript-react by glook 4 years ago
- upgrade webpack-cli to 4.3.0 https://github.com/webpack/webpack-cli/issues/2272#issuecomment-752048270 — committed to LuckyWindsck/content-base-public-path by LuckyWindsck 3 years ago
You should update
webpack-cli
to the4.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:
And then run
yarn install
ornpm 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’ )
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
meansthree
variableenv
variables and-hot
flag, i.e.{ env: { foo: true, bar: true, serve: true }, hot: true}
, becausecommander
parse them https://github.com/tj/commander.js/#variadic-optionwebpack --hot server --env foo
, also impossible due--hot
can beBoolean|String
(i.e.--hot only
) and in this case we throws error on invalid--hot
valueAlso 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 updatewebpack-cli
to the latest stable versionwebpack --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 iswebpack [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