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

dean-g · 2022-01-24T15:57:49Z

My storybook is failing with the upgrade.

Can someone please check below and advise?

ModuleBuildError: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/ivy/index.js):
Error: /../src/lib/my-lib/my-test.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at ../node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/ivy/loader.js:60:26
    at processResult (../node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:751:19)
    at ../node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:853:5
    at ../node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at ../node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (../node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at ../node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/ivy/loader.js:60:17

The text was updated successfully, but these errors were encountered:

mandarini · 2022-01-25T13:10:13Z

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

Can you please:

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

dean-g · 2022-01-25T14:38:04Z

Hello @mandarini

Thanks for looking into my issue!.

Please find below,

nx report:

nx : 13.5.2
   @nrwl/angular : 13.5.2
   @nrwl/cli : 13.5.2
   @nrwl/cypress : 13.5.2
   @nrwl/detox : undefined
   @nrwl/devkit : 13.5.2
   @nrwl/eslint-plugin-nx : 13.5.2
   @nrwl/express : undefined
   @nrwl/jest : 13.5.2
   @nrwl/js : undefined
   @nrwl/linter : 13.5.2
   @nrwl/nest : undefined
   @nrwl/next : undefined
   @nrwl/node : undefined
   @nrwl/nx-cloud : undefined
   @nrwl/react : undefined
   @nrwl/react-native : undefined
   @nrwl/schematics : 8.12.11
   @nrwl/storybook : 13.5.2
   @nrwl/tao : 13.5.2
   @nrwl/web : undefined
   @nrwl/workspace : 13.5.2
   typescript : 4.5.5
   rxjs : 7.5.2
   ---------------------------------------
   Community plugins:
   	 @angular/animations: 13.1.3
   	 @angular/cdk: 13.1.3
   	 @angular/common: 13.1.3
   	 @angular/compiler: 13.1.3
   	 @angular/core: 13.1.3
   	 @angular/forms: 13.1.3
   	 @angular/material: 13.1.3
   	 @angular/platform-browser: 13.1.3
   	 @angular/platform-browser-dynamic: 13.1.3
   	 @angular/router: 13.1.3
   	 @angular/service-worker: 13.1.3
   	 @ngrx/component: 13.0.2
   	 @ngrx/component-store: 13.0.2
   	 @ngrx/effects: 13.0.2
   	 @ngrx/entity: 13.0.2
   	 @ngrx/store: 13.0.2
   	 @ngrx/store-devtools: 13.0.2
   	 @ngx-pwa/local-storage: 13.0.2
   	 @scullyio/init: 1.1.4
   	 apollo-angular: 2.6.0
   	 @angular-devkit/build-angular: 13.1.4
   	 @angular/cli: 13.1.4
   	 @angular/compiler-cli: 13.1.3
   	 @angular/language-service: 13.1.3
   	 @angular/localize: 13.1.3
   	 @ngrx/schematics: 13.0.2
   	 @storybook/angular: 6.4.14
   	 ng-mocks: 13.0.0-alpha.6

Project configuration:

"storybook": {
          "builder": "@nrwl/storybook:storybook",
          "options": {
            "uiFramework": "@storybook/angular",
            "config": {
              "configFolder": "libs/stories/.storybook"
            },
            "projectBuildConfig": "stories:build-storybook"
          },
          "configurations": {
            "ci": {
              "quiet": true
            }
          }
        },
        "build-storybook": {
          "builder": "@nrwl/storybook:build",
          "options": {
            "uiFramework": "@storybook/angular",
            "outputPath": "dist/storybook/stories",
            "config": {
              "configFolder": "libs/stories/.storybook"
            },
            "projectBuildConfig": "stories:build-storybook"
          },
          "configurations": {
            "ci": {
              "quiet": true
            }
          }
        }
      },

Upgraded from:
`"@nrwl/cli": "13.2.2"

nx storybook my-lib --projectBuildConfig=my-lib:build-storybook

Here is the response I got,

NX Cannot find target 'storybook' for project 'my-lib'

mandarini · 2022-01-26T10:13:04Z

Hi there @dean-g ! What is your library's name? From your project configuration you pasted above, I can infer that it is stories. So, the command to run Storybook for a project called stories would be:

nx storybook stories

Can you try that?

If that fails as well, can you please send me a repository reproducing your issue so that I can look into it? Or, can you at least show me the folder structure of your workspace?

Also, please take a look at our updated projectBuildConfig for Storybook+Angular documentation.

dean-g · 2022-01-26T12:27:10Z

Here is what happens when I run nx storybook stories

nx storybook stories

> nx run stories:storybook

info => Loading presets
info => Loading custom manager config
info => Using implicit CSS loaders
info => Loading angular-cli config for angular >= 13.0.0
info => Using angular browser target options from "stories:build-storybook"
info => Using angular project with "tsConfig:/user/app/libs/stories/.storybook/tsconfig.json"
info => Loading custom manager config
<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 /user/node_modules/@storybook/addon-docs/node_modules/prettier/standalone.js as it exceeds the max of 500KB.
assets by chunk 5.5 MiB (id hint: vendors)
  assets by status 4.91 MiB [big]
    asset vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-2dc3c6.manager.bundle.js 4.54 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-addon-designs_esm_register_components_Figspec_js.manager.bundle.js 215 KiB [emitted] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_syntaxhighlighter_syntaxhighlighter_js.manager.bundle.js 194 KiB [emitted] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_tooltip_WithTooltip_js.manager.bundle.js 113 KiB [emitted] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_controls_Color_js.manager.bundle.js 70.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 main.manager.bundle.js 2.75 KiB [emitted] (name: main)
asset index.html 2.71 KiB [emitted]
asset node_modules_unfetch_dist_unfetch_js.manager.bundle.js 1.28 KiB [emitted]
Entrypoint main [big] 4.56 MiB = runtime~main.manager.bundle.js 14.1 KiB vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-2dc3c6.manager.bundle.js 4.54 MiB main.manager.bundle.js 2.75 KiB
orphan modules 1.51 MiB [orphan] 316 modules
runtime modules 8.69 KiB 14 modules


ModuleBuildError: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/ivy/index.js):
Error: /user/src/lib/app.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at /user/node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/ivy/loader.js:60:26
    at processResult (/user/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:751:19)
    at /user/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:853:5
    at /user/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /user/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/user/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /user/node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/ivy/loadModuleBuildError: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/ivy/index.js):
Error: /user/src/lib/app.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at /user/node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/ivy/loader.js:60:26
    at processResult (/user/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:751:19)
    at /user/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:853:5
    at /user/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /user/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/user/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /user/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 "stories:storybook" faileder.js:60:17


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

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

 >  NX   Running target "stories:storybook" failed

this is somehow related to the following error: storybookjs/storybook#17039

looks like they had a fix in webpack files. Can you please check nrwl users the latest storybook changes for angular 13.1 upgrade?

dean-g · 2022-01-26T12:30:30Z

Hello @mandarini

I never had an issue running a storybook. it started well but later throw an error with the following message for all my stories,

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

dean-g · 2022-01-26T13:46:17Z

few of my stories are running fine. I have an issue only with the deeply nested folder stories

FAIL:
libs/my-test-lib/stories/comp/my.stories.ts //one layer extra deep nested

SUCCEEDED:

libs/my-test-lib/stories/my.stories.ts

Here is my tsconfig looks like:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "emitDecoratorMetadata": true
  },
  "exclude": ["../**/*.spec.ts", "../**/*.test.ts"],
  "include": ["../src/**/*"]
}

Please advise if anything missing on include section

mandarini · 2022-01-26T14:06:33Z

Hi @dean-g ! Thanks for the information. The stories are linked inside your main.js file for that project. Can I see your main.js file?

dean-g · 2022-01-26T14:25:59Z

module.exports = {
  stories: [
    '../../my-project/stories/my-lib/**/*.stories.@(ts|mdx)',
  ],
  addons: [
    'storybook-addon-designs',
    'storybook-addon-themes',
    {
      name: '@storybook/addon-essentials',
      options: {
        backgrounds: false,
      },
    },
  ],
};

module.exports.core = { ...module.exports.core, builder: 'webpack5' };

mandarini · 2022-01-26T14:38:48Z

I see. And this was generated by Nx? I am having a bit of trouble understanding your folder structure. Can you please create a reproduction repo with a similar folder structure? Does the path linking the stories in main.js make sense to you, and does it correspond to the folder structure you have in your project/workspace?

Also, if you think that it's related to storybookjs/storybook#17039, have you tried the steps suggested there? Did they work for you?

dean-g · 2022-01-27T17:56:04Z

@mandarini my configuration works very well with the following version

nrwl package: 13.2.2
Angular: 13.0.2

the same setup is not working with 13.1.x and above.

Is there something changed for the storybook that causes this issue?

mandarini · 2022-01-27T19:09:38Z

Hi @dean-g, thanks for following up! Don't worry, we'll solve this issue, together :) I'll help you out!

Yes, lots of things changed both on Angular 13.1, and on the corresponding Storybook side. Can you please share at least how your folder structure looks like, so that I understand where .storybook folders and configurations live? Also, do you think you can create a sample reproduction repo with a similar folder structure?

dean-g · 2022-01-27T19:14:14Z

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

dean-g · 2022-01-27T19:15:01Z

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

mandarini · 2022-01-27T19:16:12Z

Perfect, I'll wait for the repro! Thank you @dean-g ! :)

wizardnet972 · 2022-01-28T13:33:14Z

@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.

ewalddieser · 2022-01-31T16:12:42Z

Hi, I'm also having this problem. Is it perhaps related to following issues?

storybookjs/storybook#17039
storybookjs/storybook#16977

Everything used to work fine, I get this error after the latest update of NX+Angular.

mandarini · 2022-02-01T10:21:29Z

Hi @wizardnet972 @dean-g ! I just got around into looking at this issue more carefully, and using your reproduction steps @wizardnet972 .

I am sorry, but I think the error makes sense. Did you try adding the files in the tsconfig via the 'files' or 'include' property?

When I did the following (just added the path in the project's Storybook tsconfig.json), it works as expected:

libs/shared/storybook/.storybook/tsconfig.json file:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "emitDecoratorMetadata": true
  },
  "exclude": ["../**/*.spec.ts"],
  "include": ["../src/**/*", "*.js", "../../../**/src/**/*"]
}

And to me it makes sense. We are referencing an external story in our main.js but unless we add it in the TypeScript compilation, then how can we use it?

mandarini · 2022-02-01T10:24:51Z

@ewalddieser I think you may be having a different issue, since the issues you posted here are not really related to our case (our case is about external/nested stories).
Can you please describe the issue you're facing? What worked fine, which does not work now?

mandarini · 2022-02-01T10:27:21Z

Let me know if this does the trick @wizardnet972 @dean-g , and I will go ahead and close this issue.

@ewalddieser you can open a new issue describing the exact problem you're facing, if you want, or post it here and I will look into it!

Thank you all, and thanks for providing so many details! :)

mandarini · 2022-02-01T10:32:44Z

@wizardnet972 here is my repo of the steps you posted, and a commit showing the small changed that fixed it!

wizardnet972 · 2022-02-01T11:01:36Z

@mandarini the idea of including the other stories from other libs came from this nx video: https://youtu.be/c323HOuFKkA?t=150
I want to run "shared-storybook:storybook" to be able to display all the stories from all the libs.

I try to change the tsconfig.json to include everything in the compilation as you wrote: "include": ["../src/**/*", "*.js", "../../../**/src/**/*"] in the tsconfig of shared-storybook, but its include unneccery files which can make a fail in the compilation such node libs who not should run into angular compiler.

the change of the tsconfig throws an error:

ebpack built preview 26b670823f5722db25d2 in 10542ms
ModuleParseError: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <p>bar works!</p>
|
    at handleParseError (/Users/wizardnet972/code/nx-storybook-compilation/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:971:19)
    at /Users/wizardnet972/code/nx-storybook-compilation/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:1090:5
    at processResult (/Users/wizardnet972/code/nx-storybook-compilation/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:795:11)
    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:406:3
    at iterateNormalLoaders (/Users/wizardnet972/code/nx-storybook-compilation/node_modules/loader-runner/lib/LoaderRunner.js:232:10)
    at /Users/wizardnet972/code/nx-storybook-compilation/node_modules/loader-runner/lib/LoaderRunner.js:223:4
    at /Users/wizardnet972/code/nx-storybook-compilation/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:829:15
    at Array.eval (eval at create (/Users/wizardnet972/code/nx-storybook-compilation/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:12:1)
    at runCallbacks (/Users/wizardnet972/code/nx-storybook-compilation/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:27:15)
    at /Users/wizardnet972/code/nx-storybook-compilation/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:200:4
    at /Users/wizardnet972/code/nx-storybook-compilation/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)
ModuleParseError: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <p>foo works!</p>
|
    at handleParseError (/Users/wizardnet972/code/nx-storybook-compilation/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:971:19)
    at /Users/wizardnet972/code/nx-storybook-compilation/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:1090:5
    at processResult (/Users/wizardnet972/code/nx-storybook-compilation/node_modules/@storybook/builder-w
....

mandarini · 2022-02-01T11:07:11Z

@wizardnet972 what if you change it to "../../../**/*.stories.*"?

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "emitDecoratorMetadata": true
  },
  "exclude": ["../**/*.spec.ts"],
  "include": ["../src/**/*", "*.js", "../../../**/*.stories.*"]
}

Looking at the video now! It's perfectly valid to include other stories :)

mandarini · 2022-02-01T11:11:09Z

Oh, yes, I see this video uses the old config files of Storybook (eg. config.js). Maybe back then there was a way to just add the paths in config.js and they would be added to the TypeScript compilation automatically. I am not sure.

I still think that it makes sense to include the path in the Storybook's tsconfig.json, and you can avoid including things you don't want by specifying the more specific path match pattern (*.stories.*).

Let me know if this makes sense! :)

mandarini · 2022-02-01T11:11:56Z

I updated my repo to include the new path. It should work, right? I mean, it works for me...

wizardnet972 · 2022-02-01T11:12:54Z

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

mandarini · 2022-02-01T11:13:48Z

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

wizardnet972 · 2022-02-01T11:19:41Z

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

mandarini · 2022-02-01T11:27:53Z

Hahahah :)

mandarini · 2022-02-01T11:29:58Z

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!

dean-g · 2022-02-01T15:12:58Z

Thanks @mandarini

I am getting the different errors now

Please see the following,

testFunction,
     ~~~~~~~~~~~~~~~~~

    at addError (/Users//node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/ivy/diagnostics.js:31:29)
    at /Users//node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/ivy/diagnostics.js:17:17
    at AngularWebpackPlugin.updateJitProgram (/Users//node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/ivy/plugin.js:479:9)
    at /Users//node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/ivy/plugin.js:199:24
    at Hook.eval [as call] (eval at create (/Users//node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:12:1)
    at Hook.CALL_DELEGATE [as _call] (/Users//node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/Users//node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1054:30)
    at /Users//node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1099:29
    at _next0 (eval at create (/Users//node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:23:1)
    at eval (eval at create (/Users//node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:35:1)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
Error: src/lib/my-comp/test-comp.component.stories.ts:16:3 - error TS2305: Module '"@lib/my-lib"' has no exported member 'testFunction'.

dean-g · 2022-02-01T16:09:38Z

fixed the above issue.

getting one final issue with the scss file,

Please find below and advise,

ModuleBuildError: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.

1 │ @import 'my-style-lib';
  │         ^^^^^^^^^^^^^
  ╵
  libs//lib/my-test.component.scss 1:9  root stylesheet
    at Object.callback (user/node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/index.js:54:16)
    at Worker.<anonymous> (user/node_modules/@angular-devkit/build-angular/src/sass/sass-service.js:123:25)
    at Worker.emit (events.js:376:20)
    at MessagePort.<anonymous> (internal/worker.js:210:53)
    at MessagePort.[nodejs.internal.kHybridDispatch] (internal/event_target.js:398:41)
    at MessagePort.exports.emitMessage (internal/per_context/messageport.js:18:26)

mandarini · 2022-02-01T17:26:40Z

@dean-g
this looks like a strange path libs//lib/my-test.component.scss

Also, where do you import 'my-style-lib'? In my-test.component.scss? Are all imported files added in the build configs and any other place they need to be imported? This sounds a bit unrelated to above issue. Can you please provide a reproduction?

mandarini · 2022-02-01T17:28:26Z

Btw, @wizardnet972 , you can combine stories etc using Storybook Composition! Please take a look at our docs, this may help with your usecase!

dean-g · 2022-02-01T17:35:33Z

I got the stylePreprocessorOptions setups in my angular.json file. so I can import the library directly instead of the full file path.

here is the configuration that used to works well,

"stories": {
      "projectType": "library",
      "root": "libs/stories",
      "sourceRoot": "libs/stories/src",
      "architect": {
        "build": {
          "options": {
            "builder": "@angular-devkit/build-angular:browser",
            "stylePreprocessorOptions": {
              "includePaths": ["libs/my-style-lib"]
            }
          }
        },

dean-g · 2022-02-01T17:49:48Z

I moved the stylePreprocessorOptions to build-storybook and it worked!.

Now the angular material styles are not working in my storybook but the build got succeeded.

also, the asset is not loading. getting 404 error

dean-g · 2022-02-01T20:36:26Z

I am getting the following error now when I updated "projectBuildConfig" to use the main project where we had the asset and scss setups,

Please check and advise

node:49178) UnhandledPromiseRejectionWarning: TypeError: The 'compilation' argument must be an instance of Compilation
/user/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:141:10)
/user/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/SourceMapDevToolModuleOptionsPlugin.js:50:27)
/user/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/SourceMapDevToolPlugin.js:163:53
/user/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:297:1)
/user/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/Hook.js:14:14)
/user/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1055:26)
/user/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1099:29
/user/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:23:1)
/user/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:36:1)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:49178) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:49178) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
assets by chunk 5.5 MiB (id hint: vendors)

mandarini · 2022-02-02T11:58:13Z

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!

dean-g · 2022-02-02T20:20:52Z

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?

dean-g · 2022-02-02T20:42:11Z

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

mandarini · 2022-02-03T13:39:20Z

Perfect!!! :) :)

The reason you get the polyfill.ts issue is that you're using the build target config of an app that contains polyfill.ts to build storybook for a library that does not have a polyfill.ts. You can either add polyfill.ts file in the compliation, or you can add your styles to the build-storybook target of that app, which does not have the polyfill.ts dependency! I'm so happy you could solve this issue! :)

d43vid · 2022-02-10T09:22:40Z

This issue doesn't seem to be fixed for me. I've got a project using nx, a shell, and different libraries that all have their own .storybook folder with tsconfig. If I add the include paths mentioned above to the tsconfig in .storybook folder of the lib, and the tsconfig of the lib, shell and tsconfig.base that is extended by all others the errors still persist

mandarini · 2022-02-10T11:04:14Z

Hi @d43vid ! Thanks for replying here! Can you please provide me with a small reproduction repository, so that I can better help you out, and see what's wrong?

d43vid · 2022-02-10T12:08:13Z

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

mandarini · 2022-02-21T14:50:14Z

New docs for styles and stylePreprocessorOptions

github-actions · 2023-03-22T23:04:37Z

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.

dean-g added the type: bug label Jan 24, 2022

mandarini self-assigned this Jan 25, 2022

mandarini added the scope: storybook Issues related to Storybook support in Nx label Jan 25, 2022

mandarini added the blocked: repro needed label Jan 28, 2022

mandarini removed the blocked: repro needed label Feb 1, 2022

mandarini closed this as completed Feb 1, 2022

github-actions bot added the outdated label Mar 22, 2023

github-actions bot locked as resolved and limited conversation to collaborators Mar 22, 2023

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

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

Comments

dean-g commented Jan 24, 2022 • edited

mandarini commented Jan 25, 2022

dean-g commented Jan 25, 2022

mandarini commented Jan 26, 2022 • edited

dean-g commented Jan 26, 2022

dean-g commented Jan 26, 2022

dean-g commented Jan 26, 2022 • edited

mandarini commented Jan 26, 2022

dean-g commented Jan 26, 2022

mandarini commented Jan 26, 2022

dean-g commented Jan 27, 2022 • edited

mandarini commented Jan 27, 2022

dean-g commented Jan 27, 2022 • edited

dean-g commented Jan 27, 2022 • edited

mandarini commented Jan 27, 2022

wizardnet972 commented Jan 28, 2022 • edited

ewalddieser commented Jan 31, 2022

mandarini commented Feb 1, 2022

mandarini commented Feb 1, 2022

mandarini commented Feb 1, 2022

mandarini commented Feb 1, 2022 • edited

wizardnet972 commented Feb 1, 2022

mandarini commented Feb 1, 2022

mandarini commented Feb 1, 2022

mandarini commented Feb 1, 2022 • edited

wizardnet972 commented Feb 1, 2022

mandarini commented Feb 1, 2022

wizardnet972 commented Feb 1, 2022

mandarini commented Feb 1, 2022

mandarini commented Feb 1, 2022

dean-g commented Feb 1, 2022

dean-g commented Feb 1, 2022 • edited

mandarini commented Feb 1, 2022

mandarini commented Feb 1, 2022

dean-g commented Feb 1, 2022

dean-g commented Feb 1, 2022 • edited

dean-g commented Feb 1, 2022

mandarini commented Feb 2, 2022

dean-g commented Feb 2, 2022 • edited

dean-g commented Feb 2, 2022 • edited

mandarini commented Feb 3, 2022

d43vid commented Feb 10, 2022

mandarini commented Feb 10, 2022

d43vid commented Feb 10, 2022

mandarini commented Feb 21, 2022

github-actions bot commented Mar 22, 2023

dean-g commented Jan 24, 2022 •

edited

mandarini commented Jan 26, 2022 •

edited

dean-g commented Jan 26, 2022 •

edited

dean-g commented Jan 27, 2022 •

edited

dean-g commented Jan 27, 2022 •

edited

dean-g commented Jan 27, 2022 •

edited

wizardnet972 commented Jan 28, 2022 •

edited

mandarini commented Feb 1, 2022 •

edited

mandarini commented Feb 1, 2022 •

edited

dean-g commented Feb 1, 2022 •

edited

dean-g commented Feb 1, 2022 •

edited

dean-g commented Feb 2, 2022 •

edited

dean-g commented Feb 2, 2022 •

edited