storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.4k stars 9.28k forks source link

Storybook 6.4.0-beta.26 fails with @storybook/angular #16570

Closed the-ult closed 2 years ago

the-ult commented 2 years ago

Describe the bug Using Storybook 6.4.0-beta.26 with addon: @storybook/angular results in a

ValidationError: Invalid configuration object.

(when @storybook/angular is disabled, storybook runs without any problems)

// .storybook/main.js
module.exports = {
  core: {
    builder: 'webpack5',
  },
  framework: '@storybook/angular',
  features: {
    storyStoreV7: true,
  },
  stories: [],
  addons: [
    '@storybook/angular',   // ENABLING @storybook/angular results in error
    '@storybook/addon-essentials',
    {
      name: '@storybook/addon-storysource',
      options: {
        loaderOptions: {
          injectStoryParameters: false,
        },
      },
    },
    '@storybook/addon-links', 
     '@storybook/addon-backgrounds',
  ],
}
❯ nx run ddm-ui:storybook      

> nx run ddm-ui:storybook 
info => Loading presets
info Found existing addon "@storybook/addon-backgrounds", skipping.
info => Found custom tsconfig.json
info => Found custom tsconfig.json
info => Using implicit CSS loaders
info => Loading angular-cli config
info => Using angular project "example-app:build" for configuring Storybook
info => Using angular-cli webpack config
info => Loading angular-cli config
info => Using angular project "example-app:build" for configuring Storybook
info => Using angular-cli webpack config
info => Using default Webpack5 setup
ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.entry should not contain the item '.../project/apps/example-app/src/styles.scss' twice.
   -> All modules are loaded upon startup. The last one is exported.

          Broken build, fix the error above.
          You may need to refresh the browser.

———————————————————————————————————————————————

>  NX   ERROR  Running target "ddm-ui:storybook" failed

project.json

{
  "projectType": "library",
  "root": "packages/ddm/ui",
  "sourceRoot": "packages/ddm/ui/src",
  "targets": {
    ...
    "storybook": {
      "executor": "@nrwl/storybook:storybook",
      "options": {
        "uiFramework": "@storybook/angular",
        "port": 4400,
        "config": {
          "configFolder": "packages/ddm/ui/.storybook"
        }
      },
      "configurations": {
        "ci": {
          "quiet": true
        }
      }
    },
    "build-storybook": {
      "executor": "@nrwl/storybook:build",
      "outputs": [
        "{options.outputPath}"
      ],
      "options": {
        "uiFramework": "@storybook/angular",
        "outputPath": "dist/storybook/ddm-ui",
        "config": {
          "configFolder": "packages/ddm/ui/.storybook"
        }
      },
      "configurations": {
        "ci": {
          "quiet": true
        }
      }
    },
    "compodoc": {
      "executor": "@twittwer/compodoc:compodoc",
      "options": {
        "tsConfig": "packages/ddm/ui/tsconfig.lib.json",
        "outputPath": "dist/compodoc/ddm-ui"
      },
      "configurations": {
        "json": {
          "exportFormat": "json"
        }
      }
    },
    "storybook-watch": {
      "executor": "@nrwl/workspace:run-commands",
      "options": {
        "commands": [
          "npx nx run ddm-ui:compodoc:json --watch",
          "npx nx run ddm-ui:storybook"
        ],
        "parallel": true
      }
    },
    "storybook-build": {
      "executor": "@nrwl/workspace:run-commands",
      "options": {
        "commands": [
          "npx nx run ddm-ui:compodoc:json",
          "npx nx run ddm-ui:build-storybook"
        ],
        "parallel": false
      }
    }
  },  
}

System

❯ npx sb@next info

Environment Info:

  System:
    OS: macOS 12.0.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node
    npm: 6.14.15 - ~/.nvm/versions/node/v14.18.1/bin/npm
  Browsers:
    Chrome: 95.0.4638.69
    Edge: 95.0.1020.40
    Safari: 15.1
  npmPackages:
    @storybook/addon-actions: 6.4.0-beta.26 => 6.4.0-beta.26 
    @storybook/addon-backgrounds: 6.4.0-beta.26 => 6.4.0-beta.26 
    @storybook/addon-essentials: 6.4.0-beta.26 => 6.4.0-beta.26 
    @storybook/addon-jest: 6.4.0-beta.26 => 6.4.0-beta.26 
    @storybook/addon-links: 6.4.0-beta.26 => 6.4.0-beta.26 
    @storybook/addon-storysource: 6.4.0-beta.26 => 6.4.0-beta.26 
    @storybook/angular: 6.4.0-beta.26 => 6.4.0-beta.26 
    @storybook/builder-webpack5: 6.4.0-beta.26 => 6.4.0-beta.26 
    @storybook/manager-webpack5: 6.4.0-beta.26 => 6.4.0-beta.26 
    @storybook/testing-angular: 0.0.9 => 0.0.9 
❯ npx nx report    

>  NX  Report complete - copy this into the issue template

  Node : 14.18.1
  OS   : darwin x64
  npm  : 6.14.15

  nx : Not Found
  @nrwl/angular : 13.1.3
  @nrwl/cli : 13.1.3
  @nrwl/cypress : 13.1.3
  @nrwl/devkit : 13.1.3
  @nrwl/eslint-plugin-nx : 13.1.3
  @nrwl/jest : 13.1.3
  @nrwl/linter : 13.1.3
  @nrwl/tao : 13.1.3
  @nrwl/workspace : 13.1.3
  @nrwl/storybook : 13.1.3
  typescript : 4.3.5
shilman commented 2 years ago
  framework: '@storybook/angular',
  /* ... */
  addons: [
    '@storybook/angular',   // ENABLING @storybook/angular results in error

These two entries are redundant. You need to remove @storybook/angular from the addons array. The old approach was from an earlier pre-release.

Closing this for now, please let me know if you have any questions or issues and I can reopen!