question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. ItΒ collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Storybook build fails when following the tutorials

See original GitHub issue

Current Behavior

I tried to add storybook to some ui libs but it failed, so I created a new workspace with one angular app, a workspace lib and an angular lib. It follows the example of your angular tutorial except, that there is no backend app. But i still get the same errors.

Then i added storybook for the UI lib as it is described here: https://nx.dev/storybook/overview-angular

When i run nx run ui:storybook it crashes with this error:

/apps/todos/src/polyfills.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

Now what surprises me a lot is, that it seams to look for the polyfills.ts in the todos app. So outside of the ui lib boundaries. As far as i understand this setup, it should not break the boundaries of this lib in my scenario. I mean the whole Idea of using storybook is to build components in isolation, right?

Expected Behavior

Storybook should launch…

Steps to Reproduce

I pushed my example project here: https://github.com/mbeckenbach/nxsbissue

Failure Logs

> nx run ui:storybook 
assets by chunk 5.01 MiB (id hint: vendors)
  assets by status 4.63 MiB [big]
    asset 921.manager.bundle.js 4.27 MiB [emitted] [big] (id hint: vendors)
    asset 331.manager.bundle.js 371 KiB [emitted] [big] (id hint: vendors)
  asset 278.manager.bundle.js 189 KiB [emitted] (id hint: vendors)
  asset 574.manager.bundle.js 113 KiB [emitted] (id hint: vendors)
  asset 881.manager.bundle.js 68.9 KiB [emitted] (id hint: vendors)
  asset 459.manager.bundle.js 15.3 KiB [emitted] (id hint: vendors)
asset runtime~main.manager.bundle.js 14.1 KiB [emitted] (name: runtime~main)
asset index.html 2.56 KiB [emitted]
asset 295.manager.bundle.js 1.2 KiB [emitted]
asset main.manager.bundle.js 783 bytes [emitted] (name: main)
Entrypoint main [big] 4.28 MiB = runtime~main.manager.bundle.js 14.1 KiB 921.manager.bundle.js 4.27 MiB main.manager.bundle.js 783 bytes
orphan modules 1.51 MiB [orphan] 319 modules
runtime modules 8.67 KiB 14 modules
javascript modules 4.6 MiB 893 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 7052 ms
webpack built preview 442f0581180ee4659262 in 9573ms
ModuleBuildError: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: /Users/me/Source/play/acme/apps/todos/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/me/Source/play/acme/node_modules/@ngtools/webpack/src/ivy/loader.js:60:26
    at processResult (/Users/me/Source/play/acme/node_modules/webpack/lib/NormalModule.js:751:19)
    at /Users/me/Source/play/acme/node_modules/webpack/lib/NormalModule.js:853:5
    at /Users/me/Source/play/acme/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /Users/me/Source/play/acme/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/Users/me/Source/play/acme/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /Users/me/Source/play/acme/node_modules/@ngtools/webpack/src/ivy/loader.js:60:17


β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”

>  NX   ERROR  Running target "ui:storybook" failed

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

Environment


>  NX  Report complete - copy this into the issue template

  Node : 14.18.2
  OS   : darwin arm64
  npm  : 6.14.15
  
  nx : 13.4.4
  @nrwl/angular : 13.4.4
  @nrwl/cli : 13.4.4
  @nrwl/cypress : 13.4.4
  @nrwl/devkit : 13.4.4
  @nrwl/eslint-plugin-nx : 13.4.4
  @nrwl/express : undefined
  @nrwl/jest : 13.4.4
  @nrwl/linter : 13.4.4
  @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.4
  @nrwl/web : undefined
  @nrwl/workspace : 13.4.4
  @nrwl/storybook : 13.4.4
  @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.12

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:1
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
mbeckenbachcommented, Jan 14, 2022

@mandarini sure, thanks.

1reaction
marleypowellcommented, Jan 14, 2022

I think this is the related issue #8199

Read more comments on GitHub >

github_iconTop Results From Across the Web

Configure Storybook
Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and...
Read more >
Publish Storybook
Storybook is a frontend workshop for building UI components and pages in isolation. ... Run the following command inside your project's root directory:....
Read more >
Frequently Asked Questions - Storybook - JS.ORG
Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and...
Read more >
Environment variables - Storybook - JS.ORG
Storybook is a frontend workshop for building UI components and pages in ... For example, if you add a .env file to your...
Read more >
Deploy - Storybook Tutorials - JS.ORG
Throughout this tutorial, we built components on our local development machine ... Then execute it by issuing the following in the command line...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found