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

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?

Answer 1

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.