Storybook compile errors

[daniel-zero]

Current Behavior

I added Storybook to an new created nx-workspace containing a angular app and shared library. When I execute Storybook the following error will be displayed in the console

> nx run custom-components:storybook 
info => Loading presets
info => Using implicit CSS loaders
info => Loading angular-cli config for angular >= 13.0.0
info => Using angular browser target options from "ui:build"
info => Using angular project with "tsConfig:/Users/danielsogl/workspace/test-storybook/libs/custom-components/.storybook/tsconfig.json"
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
<i> [webpack-dev-middleware] wait until bundle finished
[BABEL] Note: The code generator has deoptimised the styling of /Users/danielsogl/workspace/test-storybook/node_modules/@storybook/addon-docs/node_modules/prettier/standalone.js as it exceeds the max of 500KB.
assets by chunk 5.21 MiB (id hint: vendors)
  assets by status 4.82 MiB [big]
    asset vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-f09f2b.manager.bundle.js 4.46 MiB [emitted] [big] (id hint: vendors)
    asset vendors-node_modules_storybook_components_dist_esm_ScrollArea_OverlayScrollbars_js.manager.bundle.js 372 KiB [emitted] [big] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_syntaxhighlighter_syntaxhighlighter_js.manager.bundle.js 195 KiB [emitted] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_tooltip_WithTooltip_js.manager.bundle.js 115 KiB [emitted] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_controls_Color_js.manager.bundle.js 72.4 KiB [emitted] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_ScrollArea_GlobalScrollAreaStyles_js.manager.bundle.js 15.7 KiB [emitted] (id hint: vendors)
asset runtime~main.manager.bundle.js 14.1 KiB [emitted] (name: runtime~main)
asset index.html 2.65 KiB [emitted]
asset main.manager.bundle.js 1.46 KiB [emitted] (name: main)
asset node_modules_unfetch_dist_unfetch_js.manager.bundle.js 1.28 KiB [emitted]
Entrypoint main [big] 4.47 MiB = runtime~main.manager.bundle.js 14.1 KiB vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-f09f2b.manager.bundle.js 4.46 MiB main.manager.bundle.js 1.46 KiB
orphan modules 1.51 MiB [orphan] 319 modules
runtime modules 8.7 KiB 14 modules
javascript modules 4.61 MiB 895 modules
json modules 1.52 KiB
  ./node_modules/character-entities-legacy/index.json 1.24 KiB [built] [code generated]
  ./node_modules/character-reference-invalid/index.json 289 bytes [built] [code generated]
manager (webpack 5.65.0) compiled successfully in 15191 ms
webpack built preview 4a1ceace7f1ca92fbacf in 20364ms
ModuleBuildError: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: /Users/danielsogl/workspace/test-storybook/apps/ui/src/polyfills.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at /Users/danielsogl/workspace/test-storybook/node_modules/@ngtools/webpack/src/ivy/loader.js:60:26
    at processResult (/Users/danielsogl/workspace/test-storybook/node_modules/webpack/lib/NormalModule.js:751:19)
    at /Users/danielsogl/workspace/test-storybook/node_modules/webpack/lib/NormalModule.js:853:5
    at /Users/danielsogl/workspace/test-storybook/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /Users/danielsogl/workspace/test-storybook/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/Users/danielsogl/workspace/test-storybook/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /Users/danielsogl/workspace/test-storybook/node_modules/@ngtools/webpack/src/ivy/loader.js:60:17

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

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

>  NX   ERROR  Running target "custom-components:storybook" failed

  Failed tasks:
  
  - custom-components:storybook
  
  Hint: run the command with --verbose for more details.

Expected Behavior

Storybook should work out of th box for new nx workspaces without further adjustments.

Steps to Reproduce

1. create a empty workspace
2. add a angular app
3. add a angular library with one component
4. add storybook
5. run storybook

I created a example repo: https://github.com/daniel-zero/nx-storybook-error

Environment

>  NX  Report complete - copy this into the issue template

  Node : 14.18.2
  OS   : darwin x64
  npm  : 6.14.15
  
  nx : undefined
  @nrwl/angular : 13.4.5
  @nrwl/cli : 13.4.5
  @nrwl/cypress : 13.4.5
  @nrwl/devkit : 13.4.5
  @nrwl/eslint-plugin-nx : 13.4.5
  @nrwl/express : undefined
  @nrwl/jest : 13.4.5
  @nrwl/linter : 13.4.5
  @nrwl/nest : undefined
  @nrwl/next : undefined
  @nrwl/node : undefined
  @nrwl/nx-cloud : undefined
  @nrwl/react : undefined
  @nrwl/react-native : undefined
  @nrwl/schematics : undefined
  @nrwl/tao : 13.4.5
  @nrwl/web : undefined
  @nrwl/workspace : 13.4.5
  @nrwl/storybook : 13.4.5
  @nrwl/gatsby : undefined
  typescript : 4.4.4
  rxjs : 7.4.0
  ---------------------------------------
  Community plugins:
         @angular/animations: 13.1.2
         @angular/common: 13.1.2
         @angular/compiler: 13.1.2
         @angular/core: 13.1.2
         @angular/forms: 13.1.2
         @angular/platform-browser: 13.1.2
         @angular/platform-browser-dynamic: 13.1.2
         @angular/router: 13.1.2
         @angular-devkit/build-angular: 13.1.3
         @angular/cli: 13.1.3
         @angular/compiler-cli: 13.1.2
         @angular/language-service: 13.1.2
         @storybook/angular: 6.4.13

[mandarini]

Hi there @daniel-zero ! Thanks for filing an issue! This is a duplicate issue, so I'll close it for now. A PR is on the way.

In the meantime, please follow this suggestion

Related/duplicated issues:
#8199
#7992
#8527
#8373
#8360

[mandarini]

New docs for styles and stylePreprocessorOptions

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.