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

Angular Storybook - WebpackOptionsValidationError: Webpack has been initialised using a configuration object that does not match the API schema

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.