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-clito the4.3.0Update 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 installornpm 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 --hotmeansthreevariableenvvariables and-hotflag, i.e.{ env: { foo: true, bar: true, serve: true }, hot: true}, becausecommanderparse them https://github.com/tj/commander.js/#variadic-optionwebpack --hot server --env foo, also impossible due--hotcan beBoolean|String(i.e.--hot only) and in this case we throws error on invalid--hotvalueAlso 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-clito the latest stable versionwebpack --env mode=dev --env isDevServer --env NODE_ENV=local serve --config ./webpack.config.babel.jsworks 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