files within library with storybook configuration use incorrect tsconfig for vs code intellisense

Current Behavior

Intellisense within VS Code for a given .ts file in a library will utilize the <lib-name>/.storybook/tsconfig.json file for intellisense rather than the <lib-name>/tsconfig.lib.json file.

I honestly don’t really know whether this should be considered an issue for nx, vscode, or typescript, but since I think there is at least a change that could be made with the <lib-name>/.storybook/tsconfig.json that nx generates, I figured I’d at least start here.

Why this is an issue

In my specific case, this is a problem because I’m trying to enforce strict mode for all of our “prod” files in a library for our organization, but our .storybook/tsconfig.json file explicitly disables strict mode atm.

In general though, there could be other configuration differences that are not specifically scoped to the less than optimal configuration that we have in our organization’s workspace. The one that I can immediately think of is the types setting that is present in the tsconfig.lib.json. If the .storybook/tsconfig.json config is used instead, it will be very confusing why adding to the types array of the tsconfig.lib.json file does not fix VS Code’s intellisense for the types that were added.

Expected Behavior

The <lib-name>/tsconfig.lib.json file should be utilized for non-storybook (and non-spec) files.

Seems like this could be done similarly to how the default tsconfig.spec.json files are generate for libs by limiting the files that are included within the tsconfig.json file.

Something more like:

"files": ["src/test-setup.ts"],
"include": ["**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"]

but with .stories instead of .spec.

Steps to Reproduce

Create an nx workspace preset for angular with a library that has a storybook configuration:

npx create-nx-workspace@13.0.3  --preset=angular
ng generate @nrwl/angular:library --name=strict-lib
ng generate @nrwl/storybook:configuration --name=strict-lib --configureCypress --uiFramework=@storybook/angular

or use this repo:

https://github.com/amayer42/test-workspace-v13

Additional Info

It seems like this issue is at least somewhat related to the version of TypeScript that VS Code is utilizing. I have an older workspace (Angular 11, TypeScript 4.0.5) and this issue does not seem to surface if I tell VS Code to utilize the workspace version of TypeScript instead. I reproduced this in the repo linked above in the typescript-4.0.x branch. You can also just run npm i typescript@4.0 -D to simulate the same thing and update .vscode/settings.json to contain "typescript.tsdk": "node_modules\\typescript\\lib" if you are running this from a blank slate.

NOTE: VS Code does not seem to automatically update its UI (or possibly re-run tsserver) when the TypeScript version is updated. I had to toggle the VS Code setting and/or close/re-open a .ts file in order to get VS Code to update the config file that it was using.

The unexpected behavior seems to begin with typescript@4.1. You should be able to see that the unexpected behavior is present in the typescript-4.1.x branch or by running npm i typescript@4.1 -D.

Environment

nx report

Node : 14.19.0
OS   : win32 x64
npm  : 6.14.16

nx : 13.10.3
@nrwl/angular : 13.10.3
@nrwl/cypress : 13.10.3
@nrwl/detox : Not Found
@nrwl/devkit : 13.10.3
@nrwl/eslint-plugin-nx : 13.10.3
@nrwl/express : Not Found
@nrwl/jest : 13.10.3
@nrwl/js : Not Found
@nrwl/linter : 13.10.3
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : Not Found
@nrwl/nx-cloud : Not Found
@nrwl/nx-plugin : Not Found
@nrwl/react : Not Found
@nrwl/react-native : Not Found
@nrwl/schematics : Not Found
@nrwl/storybook : 13.10.3
@nrwl/web : Not Found
@nrwl/workspace : 13.10.3
typescript : 4.6.3
rxjs : 7.4.0
---------------------------------------
Community plugins:
     @storybook/angular: 6.4.22

Local VS Code Info

Version: 1.66.2 (user setup) Commit: dfd34e8260c270da74b5c2d86d61aee4b6d56977 Date: 2022-04-11T07:46:01.075Z Electron: 17.2.0 Chromium: 98.0.4758.109 Node.js: 16.13.0 V8: 9.8.177.11-electron.0 OS: Windows_NT x64 10.0.19044

[amayer42]

@mandarini , thanks for the response. Completely understand. Just glad to see that it’s been acknowledged and hope that this will at least let someone else know that they aren’t crazy if they run into the same issue 😃

[amayer42]

@mandarini , okay awesome! I am overall fairly unfamiliar with the whole ecosystem of storybook, but I know that the “storybook” target of the project still works after making the change that I did in that branch (nx run strict-lib:storybook). I will try to put up a PR later tonight for this.