Question posted in 
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?
2
Answers
As shown here Github Issue Storybook Angular 12, you are not alone with this error.
If we look closely in your error log,
Storybookcontinue to useWebpack4But Angular 12 use Wepback 5 from now.
You should follow the upgrade guide of Storybook and do the following steps
If this is still not working, try the following tip from vdiaz1130
If you still have issue after all that, try deleting your
node_modulesdirectory and download the dependecies again for fresh start.As Pilpo has mentioned, Angular 12 uses webpack 5, where storybook had only minor updates so they didn’t migrate to webpack 5 yet. But they’ve included opt-in support for it. Read more in migration guide 🖖