Nx: Storybook Install: "Could not read apps/ng-nest/tsconfig.lib.json"

[leifwells]

Prerequisites

Please answer the following questions for yourself before submitting an issue.
YOU MAY DELETE THE PREREQUISITES SECTION.

• [x ] I am running the latest version
• [ x] I checked the documentation (nx.dev) and found no answer
• [x ] I checked to make sure that this issue has not already been filed
• [x ] I'm reporting the issue to the correct repository (not related to React, Angular or any dependency)

Expected Behavior

The expected behavior is to be able to install Storybook integration given the documentation instructions.

Current Behavior

The current behavior when following the instructions for installing Storybook integration ends with an error "Could not read apps/ng-nest/tsconfig.lib.json" (which makes no sense, because the only tsconfig.lib.json in the project is in the libs/api-interfaces/tsconfig.lib.json, and I do not believe there would ever be a apps/ng-nest/tsconfig.lib.json file).

Failure Information (for bugs)

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. npx create-nx-workspace@latest nx-test-workspace
   Workspace: angular-nest
   Application Name: ng-nest
   Default style: SCSS (.scss)
2. cd nx-test-workspace
3. npx -p @storybook/cli sb init
4. nx g @nrwl/angular:storybook-configuration ng-nest which fails with an error "Could not find module "@nrwl/storybook" from "/Users/leifwells/Code/nx-test-workspace".
5. npm i -D @nrwl/storybook to avoid the error
6. nx g @nrwl/angular:storybook-configuration ng-nest which ends with the error "Could not read apps/ng-nest/tsconfig.lib.json"

Context

Please provide any relevant information about your setup:

  @nrwl/angular : 8.11.2
  @nrwl/cli : 8.11.2
  @nrwl/cypress : 8.11.2
  @nrwl/eslint-plugin-nx : Not Found
  @nrwl/express : Not Found
  @nrwl/jest : 8.11.2
  @nrwl/linter : 8.11.2
  @nrwl/nest : 8.11.2
  @nrwl/next : Not Found
  @nrwl/node : 8.11.2
  @nrwl/react : Not Found
  @nrwl/schematics : Not Found
  @nrwl/tao : 8.11.2
  @nrwl/web : Not Found
  @nrwl/workspace : 8.11.2
  typescript : 3.5.3

[shanepadgett]

Getting the same issue with react-express application.

[leifwells]

It looks like the problem is here:
https://github.com/nrwl/nx/blob/8c99bc3da7ab34ac2927e7d5bd8faa886eea28cc/packages/storybook/src/schematics/configuration/configuration.ts#L77

const tsConfigPath = projectPath + '/tsconfig.lib.json';

My assumption is that the end of that line should be '/tsconfig.app.json'; or '/tsconfig.json'; but that, again, is an assumption.

Mind you, I have no idea how to set up this project or run it locally to test. I'm looking at finding out more so I can help you help me.

[PizzapunkDev]

I think this error to be expected; you're asking Storybook to generate stories against an application, whereas you'd typically want to generate stories against a library of components that are imported by an application, hence why it's trying to find a .lib.json file.

The documentation around using Storybook in NX definitely could do with a touch up to better reflect this.

[ctaepper]

yes it seems like the schematic is only targeting libs. however, applying the same schematic result manually to an app in the workspace does work. so the schematic really should just check if its app or lib and try to read the proper tsconfig json

[leifwells]

applying the same schematic result manually to an app in the workspace does work

@ctaepper Can you tell me how I can do this?

[juuyan]

I think this error to be expected

@PizzapunkDev Agree. But I feel this design is bit too inflexible.

[juuyan]

I hope nx app project could natively support storybook.
For now, is there any workarounds?

[juuyan]

@leifwells
Hey, just share how I make it works.
I simply manually provided a tsconfig.lib.json for storybook to initialize.
Another problem would come after is that storybook could not resolve "@workspace/lib-name". To solve this I added the following into storybook's own webpack.config.js

config.resolve.plugins = [
    new TsconfigPathsPlugin({
      configFile: path.resolve(__dirname, '../tsconfig.json')
    })
  ];

Hope it helps.

[costalvaro]

Hi, same issue on my side, it feels inappropriate to say that Storybook can only be used for libs..
Looking forward to a fix! 👍

[FrozenPandaz]

Hi all,

Sorry for the delay in responding.

I think the fix is easy enough for someone in the community to take a look. The type of project (app or lib is available in the line here:

https://github.com/nrwl/nx/blob/8c99bc3da7ab34ac2927e7d5bd8faa886eea28cc/packages/storybook/src/schematics/configuration/configuration.ts#L77

getProjectConfig(tree, projectName)

Would somebody from the community be interested in taking a look?

[laverix]

Problem is still there. Someone please fix this.

[skrzepij]

@FrozenPandaz
Should it be tsconfig.json or tsconfig.app.json for projectType: 'application'?

I have the same issue in my project, and we have following structure

<workspace_name>
  apps/
    <project_name>
      src/
        tsconfig.app.json
      tsconfig.json

So it's the same as in documentation

When I changed in the schematics configuration file /tsconfig.lib.json to /tsconfig.json it starts to work properly.

So I assume for application type of project it should be /tsconfig.json - Can someone confirm, that I'm thinking right, please?

[laverix]

I think it's not supposed to work with apps. For libs works just fine.

[PizzapunkDev]

@FrozenPandaz
Should it be tsconfig.json or tsconfig.app.json for projectType: 'application'?

I have the same issue in my project, and we have following structure

<workspace_name>
  apps/
    <project_name>
      src/
        tsconfig.app.json
      tsconfig.json

So it's the same as in documentation

When I changed in the schematics configuration file /tsconfig.lib.json to /tsconfig.json it starts to work properly.

So I assume for application type of project it should be /tsconfig.json - Can someone confirm, that I'm thinking right, please?

At a guess, it should be tsconfig.app.json. The root level tsconfig.json file is more for project-wide configuration that's agnostic to whether the inheritor is an app or a lib. But since you don't target Storybook towards a generic 'everything' but instead a specific app or lib within a monorepo, tsconfig.app.json makes more sense to me.

[asherccohen]

Hi, any update on this matter?

[mandarini]

Hi there @asherccohen ! We are waiting for PR #3264 to be fixed, that will solve this issue!

[webberwang]

@FrozenPandaz I fixed this in https://github.com/nrwl/nx/pull/3611, added some unit tests as well. Let me know if anything needs to be changed.