Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
Ask Question
I have updated angular from
11
to
12
and I have also updated all packages to the latest versions in my
package.json
:
"name": "poc-architecture-angular",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --host 0.0.0.0 --port 4200",
"build": "NODE_ENV=production ng build --prod",
"build:dev": "NODE_ENV=production ng build --source-map=true --prod",
"build:local": "ng build --watch --output-path /usr/share/nginx/html && tar -zcvf archive.tar.gz dist/prod/*",
"test": "ng test",
"test:coverage": "ng test --no-watch --code-coverage --browsers ChromeHeadlessNoSandbox",
"lint": "ng lint",
"e2e": "ng e2e",
"stylelint": "stylelint --fix \"src/**/*.scss\" --config .stylelintrc.json",
"stylelint:diff": "stylelint \"src/**/*scss\" --config .stylelintrc.json",
"format": "prettier --write \"src/app/**/*.{ts,html,scss}\"",
"format:diff": "prettier --list-different \"src/app/**/*.{ts,html,scss}\"",
"analize": "ng build --prod --stats-json && node_modules/.bin/webpack --json | webpack-bundle-analyzer ./dist/poc-architecture-angular/stats.json",
"compodoc": "./node_modules/.bin/compodoc -p ./tsconfig.base.json -w -s --language=it-IT -r 8081",
"docs:json": "compodoc -p ./tsconfig.json -e json -d .",
"storybook": "npm run docs:json && start-storybook -p 9001 --quiet -c .storybook",
"build-storybook": "npm run docs:json && build-storybook",
"cypress:open-local": "cypress open --config baseUrl=http://localhost:4200",
"cypress:run-local": "cypress run --config baseUrl=http://localhost:4200",
"sonar": "sonar-scanner"
"husky": {
"hooks": {
"pre-commit": "lint-staged"
"lint-staged": {
"src/app/**/*.{ts,html,scss}": [
"prettier --write"
"exports": {
"./": "./*"
"private": true,
"dependencies": {
"@angular/animations": "~12.2.5",
"@angular/cdk": "^12.2.5",
"@angular/common": "~12.2.5",
"@angular/compiler": "^12.2.5",
"@angular/core": "~12.2.5",
"@angular/forms": "~12.2.5",
"@angular/material": "^12.2.5",
"@angular/platform-browser": "~12.2.5",
"@angular/platform-browser-dynamic": "~12.2.5",
"@angular/router": "~12.2.5",
"@fullcalendar/angular": "^5.5.0",
"@fullcalendar/core": "^5.5.1",
"@fullcalendar/daygrid": "^5.5.0",
"@fullcalendar/interaction": "^5.5.0",
"@ng-select/ng-select": "^7.2.0",
"@ngrx/effects": "^12.4.0",
"@ngrx/router-store": "^12.4.0",
"@ngrx/store": "^12.4.0",
"@ngrx/store-devtools": "^12.4.0",
"@storybook/preset-scss": "^1.0.3",
"chart.js": "^3.5.1",
"filesize": "^8.0.0",
"hammerjs": "^2.0.8",
"lodash-es": "^4.17.20",
"luxon": "^2.0.2",
"mammoth": "^1.4.16",
"moment": "^2.29.1",
"ng2-pdf-viewer": "^7.0.1",
"ngrx-store-localstorage": "^12.0.1",
"ngx-cookie-service": "^12.0.3",
"ngx-infinite-scroll": "^10.0.1",
"ngx-webstorage": "^8.0.0",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"xlsx": "^0.17.1",
"zone.js": "~0.11.3"
"devDependencies": {
"@angular-devkit/build-angular": "^12.2.5",
"@angular/cli": "^12.2.5",
"@angular/compiler-cli": "^12.2.5",
"@babel/core": "^7.13.10",
"@compodoc/compodoc": "^1.1.11",
"@ngrx/schematics": "^12.4.0",
"@storybook/addon-actions": "^6.1.21",
"@storybook/addon-backgrounds": "^6.1.21",
"@storybook/addon-docs": "^6.1.21",
"@storybook/addon-knobs": "^6.1.21",
"@storybook/addon-links": "^6.1.21",
"@storybook/addon-storysource": "^6.1.21",
"@storybook/addon-viewport": "^6.1.21",
"@storybook/angular": "^6.1.21",
"@types/faker": "^5.1.7",
"@types/fs-extra": "^9.0.12",
"@types/jasmine": "^3.5.14",
"@types/jasminewd2": "~2.0.3",
"@types/lodash": "^4.14.168",
"@types/luxon": "^2.0.3",
"@types/node": "^16.9.1",
"autoprefixer": "^10.0.1",
"babel-loader": "^8.2.2",
"codelyzer": "^6.0.0",
"css-loader": "^6.2.0",
"cypress": "^8.3.1",
"faker": "^5.1.0",
"husky": "^7.0.2",
"jasmine-core": "~3.9.0",
"jasmine-spec-reporter": "~7.0.0",
"karma": "~6.3.4",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"lint-staged": "^11.1.2",
"ng-packagr": "^12.2.1",
"postcss": "^8.1.0",
"postcss-loader": "^6.1.1",
"prettier": "^2.2.1",
"protractor": "~7.0.0",
"puppeteer": "~10.2.0",
"sass-loader": "^12.1.0",
"sonarqube-scanner": "2.8.1",
"style-loader": "^3.2.1",
"stylelint": "^13.6.1",
"stylelint-config-sass-guidelines": "^8.0.0",
"stylelint-config-standard": "^22.0.0",
"stylelint-order": "^4.1.0",
"stylelint-scss": "^3.18.0",
"tailwindcss": "^2.2.6",
"tailwindcss-multi-column": "^1.0.2",
"ts-node": "~10.2.1",
"tslint": "~6.1.0",
"tslint-config-prettier": "^1.18.0",
"typescript": "~4.3.5",
"webpack-bundle-analyzer": "^4.4.2",
"webpack-cli": "^4.8.0"
I have also
Storybook
for
Angular
in this project and when I run
npm-run-storybook
I have this error:
info => Loading angular-cli config
info => Using angular project "poc-architecture-angular:build" for configuring Storybook
info => Using angular-cli webpack config
info => Using default Webpack4 setup
ERR! WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR! - configuration.module.rules[4].rules[0].oneOf[0].type should be one of these:
ERR! "javascript/auto" | "javascript/dynamic" | "javascript/esm" | "json" | "webassembly/experimental"
ERR! -> Module type to use for the module
ERR! at webpack (/home/andrea/workspace/eolo_master/web/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/webpack.js:31:9)
ERR! at Object.start (/home/andrea/workspace/eolo_master/web/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:96:18)
ERR! at async Promise.all (index 0)
ERR! at async storybookDevServer (/home/andrea/workspace/eolo_master/web/node_modules/@storybook/core-server/dist/cjs/dev-server.js:123:28)
ERR! at async buildDevStandalone (/home/andrea/workspace/eolo_master/web/node_modules/@storybook/core-server/dist/cjs/build-dev.js:112:31)
ERR! at async Object.buildDev (/home/andrea/workspace/eolo_master/web/node_modules/@storybook/core-server/dist/cjs/build-dev.js:154:5)
ERR! WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR! - configuration.module.rules[4].rules[0].oneOf[0].type should be one of these:
ERR! "javascript/auto" | "javascript/dynamic" | "javascript/esm" | "json" | "webassembly/experimental"
ERR! -> Module type to use for the module
ERR! at webpack (/home/andrea/workspace/eolo_master/web/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/webpack.js:31:9)
ERR! at Object.start (/home/andrea/workspace/eolo_master/web/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:96:18)
ERR! at async Promise.all (index 0)
ERR! at async storybookDevServer (/home/andrea/workspace/eolo_master/web/node_modules/@storybook/core-server/dist/cjs/dev-server.js:123:28)
ERR! at async buildDevStandalone (/home/andrea/workspace/eolo_master/web/node_modules/@storybook/core-server/dist/cjs/build-dev.js:112:31)
ERR! at async Object.buildDev (/home/andrea/workspace/eolo_master/web/node_modules/@storybook/core-server/dist/cjs/build-dev.js:154:5)
I haven't any webpack config, only the default config of angular-cli.
How can I fix it?
As shown here Github Issue Storybook Angular 12, you are not alone with this error.
If we look closely in your error log, Storybook continue to use Webpack4
info => Using angular-cli webpack config
info => Using default Webpack4 setup
But Angular 12 use Wepback 5 from now.
You should follow the upgrade guide of Storybook and do the following steps
npm install @storybook/builder-webpack5@next
@storybook/manager-webpack5@next --save-dev
Then edit your .storybook/main.js config:
module.exports = { core: {
builder: 'webpack5', }, };
If this is still not working, try the following tip from vdiaz1130
If you still have issue after all that, try deleting your node_modules directory and download the dependecies again for fresh start.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
