nx: storybook is failing: is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

@mandarini No worries, I figured it out. The path was incorrect for my project …/**/*.stories works for me. Thanks for the help!

including polyfill.ts in files worked for me!. thank you so much for helping all the way!!

Thanks @mandarini

I have added the following configuration in my package json

"resolutions": { "webpack": "^5.68.0" }

this solved the above error.

but now, I am getting the following error,

webpack built preview 4c6ff73840e0d7fdbc84 in 77758ms ModuleBuildError: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js): Error: /Users/apps/my-app/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/node_modules/@ngtools/webpack/src/ivy/loader.js:60:26 at processResult (/Users/node_modules/webpack/lib/NormalModule.js:753:19) at /Users/node_modules/webpack/lib/NormalModule.js:855:5 at /Users/node_modules/loader-runner/lib/LoaderRunner.js:399:11 at /Users/node_modules/loader-runner/lib/LoaderRunner.js:251:18 at context.callback (/Users/node_modules/loader-runner/lib/LoaderRunner.js:124:13) at /Users/node_modules/@ngtools/webpack/src/ivy/loader.js:60:17

Can you please advise on this?

Hi @dean-g ! Thanks for this. This is a separate issue, which I think is related to Storybook. Check out this comment as well. If these are not helpful, I suggest you open a new issue on the Storybook side, or a new issue here with this new problem!

I am really really sorry that you are having a bad experience at the moment, and I hope we manage to sort this out soon, and get you unblocked!

I’m closing this issue, since it seems that if you add the missing files in tsconfig.json fixes it. If issue persists @dean-g , let me know and I can reopen!

@ewalddieser let me know about the issue you’re having!

@mandarini Yes .../../../**/*.stories.* works! Thank you so much genius!

It still does not work if you add the *.stories.* pattern?

Yes, it works. but when you have node lib it doesn’t, because it’s throw node errors. I also check about .stories.

@mandarini I can confirm this error because I got it too.

https://github.com/wizardnet972/nx-storybook-compilation

(Below is how to reproduce the problem.)

➜  nx-storybook-compilation git:(main) ✗ yarn nx run shared-storybook:storybook
yarn run v1.22.11
$ /Users/wizardnet972/code/nx-storybook-compilation/node_modules/.bin/nx run shared-storybook:storybook

> nx run shared-storybook:storybook

info => Loading presets
(node:44899) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/wizardnet972/code/nx-storybook-compilation/node_modules/tslib/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Using implicit CSS loaders
info => Loading angular-cli config for angular >= 13.0.0
info => Using angular browser target options from "shared-storybook:build-storybook"
info => Using angular project with "tsConfig:/Users/wizardnet972/code/nx-storybook-compilation/libs/shared/storybook/.storybook/tsconfig.json"
<i> [webpack-dev-middleware] wait until bundle finished
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
[BABEL] Note: The code generator has deoptimised the styling of /Users/wizardnet972/code/nx-storybook-compilation/node_modules/@storybook/addon-docs/node_modules/prettier/standalone.js as it exceeds the max of 500KB.
assets by chunk 5.01 MiB (id hint: vendors)
  assets by status 4.62 MiB [big]
    asset vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-622a8b.manager.bundle.js 4.26 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.5 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.55 KiB [emitted] (name: main)
asset node_modules_unfetch_dist_unfetch_js.manager.bundle.js 1.3 KiB [emitted]
Entrypoint main [big] 4.27 MiB = runtime~main.manager.bundle.js 14.1 KiB vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-622a8b.manager.bundle.js 4.26 MiB main.manager.bundle.js 1.55 KiB
orphan modules 1.5 MiB [orphan] 325 modules
runtime modules 8.72 KiB 14 modules
javascript modules 4.46 MiB 908 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.67.0) compiled successfully in 9248 ms
webpack built preview f5c73d934f271a295f3e in 9761ms
ModuleBuildError: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/ivy/index.js):
Error: /Users/wizardnet972/code/nx-storybook-compilation/libs/ng-lib-bar/src/lib/bar/bar.component.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at /Users/wizardnet972/code/nx-storybook-compilation/node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/ivy/loader.js:60:26
    at processResult (/Users/wizardnet972/code/nx-storybook-compilation/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:753:19)
    at /Users/wizardnet972/code/nx-storybook-compilation/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:855:5
    at /Users/wizardnet972/code/nx-storybook-compilation/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /Users/wizardnet972/code/nx-storybook-compilation/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/Users/wizardnet972/code/nx-storybook-compilation/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /Users/wizardnet972/code/nx-storybook-compilation/node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/ivy/loader.js:60:17
ModuleBuildError: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/ivy/index.js):
Error: /Users/wizardnet972/code/nx-storybook-compilation/libs/ng-lib-foo/src/lib/foo/foo.component.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at /Users/wizardnet972/code/nx-storybook-compilation/node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/ivy/loader.js:60:26
    at processResult (/Users/wizardnet972/code/nx-storybook-compilation/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:753:19)
    at /Users/wizardnet972/code/nx-storybook-compilation/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:855:5
    at /Users/wizardnet972/code/nx-storybook-compilation/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /Users/wizardnet972/code/nx-storybook-compilation/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/Users/wizardnet972/code/nx-storybook-compilation/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /Users/wizardnet972/code/nx-storybook-compilation/node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/ivy/loader.js:60:17


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


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

 >  NX   Running target "shared-storybook:storybook" failed

   Failed tasks:

   - shared-storybook:storybook

   Hint: run the command with --verbose for more details.

error Command failed with exit code 1.

Here is how to reproduce the problem:

git clone https://github.com/wizardnet972/nx-storybook-compilation.git

cd nx-storybook-compilation

yarn

yarn nx run shared-storybook:storybook


--OR run those commands: --

npx create-nx-workspace nx-story-compilation --preset apps --packageManager yarn --nx-cloud false

cd nx-story-compilation

yarn add @nrwl/angular @nrwl/node

yarn nx g @nrwl/node:app nx-api

yarn nx g @nrwl/angular:app nx-ui --style scss --routing --backendProject nx-api

yarn add -D @nrwl/storybook

yarn nx g @nrwl/angular:storybook-configuration nx-ui --configureCypress false --generateStories true --generateCypressSpecs false

yarn nx g @nrwl/angular:stories nx-ui --generateCypressSpecs false 

yarn nx g @nrwl/angular:lib ng-lib-foo

yarn nx g @nrwl/angular:lib ng-lib-bar

yarn nx g @nrwl/angular:lib storybook --directory shared

yarn nx g @nrwl/angular:component foo --project ng-lib-foo

yarn nx g @nrwl/angular:component bar --project ng-lib-bar

yarn nx g @nrwl/angular:stories ng-lib-foo --generateCypressSpecs false 

yarn nx g @nrwl/angular:stories ng-lib-bar --generateCypressSpecs false 

yarn nx g @nrwl/angular:storybook-configuration shared-storybook --configureCypress false --generateStories true --generateCypressSpecs false

add: 
'../../../**/*.stories.@(js|jsx|ts|tsx)'
to shared-storybook/main.js like in my repo:
https://github.com/wizardnet972/nx-storybook-compilation/blob/main/libs/shared/storybook/.storybook/main.js#L12

yarn nx run shared-storybook:storybook

nx report:

 >  NX   Report complete - copy this into the issue template

   Node : 16.13.0
   OS   : darwin arm64
   yarn : 1.22.11

   nx : 13.6.1
   @nrwl/angular : 13.6.1
   @nrwl/cli : 13.6.1
   @nrwl/cypress : 13.6.1
   @nrwl/detox : undefined
   @nrwl/devkit : 13.6.1
   @nrwl/eslint-plugin-nx : 13.6.1
   @nrwl/express : undefined
   @nrwl/jest : 13.6.1
   @nrwl/js : undefined
   @nrwl/linter : 13.6.1
   @nrwl/nest : undefined
   @nrwl/next : undefined
   @nrwl/node : 13.6.1
   @nrwl/nx-cloud : undefined
   @nrwl/react : undefined
   @nrwl/react-native : undefined
   @nrwl/schematics : undefined
   @nrwl/storybook : 13.6.1
   @nrwl/tao : 13.6.1
   @nrwl/web : undefined
   @nrwl/workspace : 13.6.1
   typescript : 4.4.4
   rxjs : 7.4.0
   ---------------------------------------
   Community plugins:
   	 @angular/animations: 13.1.3
   	 @angular/common: 13.1.3
   	 @angular/compiler: 13.1.3
   	 @angular/core: 13.1.3
   	 @angular/forms: 13.1.3
   	 @angular/platform-browser: 13.1.3
   	 @angular/platform-browser-dynamic: 13.1.3
   	 @angular/router: 13.1.3
   	 @angular-devkit/build-angular: 13.1.4
   	 @angular/cli: 13.1.4
   	 @angular/compiler-cli: 13.1.3
   	 @angular/language-service: 13.1.3
   	 @storybook/angular: 6.4.15

(node:45012) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/wizardnet972/code/nx-storybook-compilation/node_modules/tslib/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
✨  Done in 3.42s.

let me work on recreating this issue with the new folder structure

something wrong with the following setups: stories: [ ../../my-project/stories/my-lib/**/*.stories.@(ts|mdx) ]

**/* not working seems -> storybook is not going through the nested folder!. it only picks up the current directory which is my-lib for my case

Hi there @dean-g ! Thanks for filing an issue!

Can you please:

1. Run nx report and paste it here?
2. Show me your project’s storybook and build-storybook targets? They are both in your project’s project.json file
3. Which version did you upgrade from?
4. Can you try running Storybook with nx storybook my-lib --projectBuildConfig=my-lib:build-storybook and let me know if it worked?