Storybook controls TypeScript inference not working as expected in a NX workspace

[rmevans9]

Describe the bug
When a component refers to a type from another lib in a NX workspace via the alias created by NX storybook controls fail to infer the type correctly.

To Reproduce
This reproduction was setup via NX CLI commands since the behavior is exhibited that way.

Repo: https://github.com/rmevans9/storybook-ts-issue
Storybook: https://main--61f9e6cee45291003a1e5539.chromatic.com/

System
Please paste the results of npx sb@next info here.

Environment Info:

  System:
    OS: macOS 11.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.18.1/bin/npm
  Browsers:
    Chrome: 97.0.4692.99
    Safari: 15.0
  npmPackages:
    @storybook/addon-essentials: ~6.4.12 => 6.4.17
    @storybook/builder-webpack5: ~6.4.12 => 6.4.17
    @storybook/manager-webpack5: ~6.4.12 => 6.4.17
    @storybook/react: ~6.4.12 => 6.4.17

Additional context
I suspect it has something to do with just the alias setup that NX uses because as you see in the reproduction case (https://github.com/rmevans9/storybook-ts-issue/blob/main/libs/storybook/src/lib/TestComponent.tsx#L2-L13) I import the exact same type from the same file and it has different outcomes. The only difference is direct path import vs the alias import.

Also note that all of the properties defined have effectively the same type as far as TypeScript is concerned

[rmevans9]

After digging through a bunch of code to try and locate the issue following the logic through all kinds of places I finally have the actual root cause for this issue.

To start with: This is 100% an issue because of the NX configuration. That said I likely need to move this issue over to https://github.com/nrwl/nx

That said I will put my findings here to help anyone that may come to this repo in search of the solution to this problem in the future. What is occuring is react-docgen-typescript defaults to looking for tsconfig.json in the root of the project folder. This would be fine if the context was within the lib folder that storybook is running for but for some reason, likely because of the setup where there is a main.js in a .storybook folder at the root of the nx workspace, the root of where it is looking is the root of the workspace. In a default configured nx workspace there is no tsconfig.json at that level. Only a tsconfig.base.json that gets imported by all apps / libs. Therefore the issue existed because react-docgen-typescript was unable to find the tsconfig.json that told it the paths that get used by nx to alias libs. The fix is really simple once that is all understood. In the main.ts of the .storybook folder add the following:

  typescript: {
    reactDocgenTypescriptOptions: {
      tsconfigPath: './tsconfig.base.json',
    },
  },

[shilman]

cc @mandarini

[mandarini]

Hi there @rmevans9 ! Have you opened an issue on the Nx github page? If yes, can you give me the link? Thanks for looking into this! :)

[rmevans9]

Hello @mandarini, I never did create an issue over there because I solved it for myself with the config and then quickly got distracted on other things I had to get done.. sorry about that! I did note one extra thing after closing this issue, there is actually a tsconfig in the .storybook folder that doesn't get picked up. I am wondering if the thought was that it would get picked up normally but isn't.

[mandarini]

Potentially. Can you share a repo I could take a look at? tsconfig in .storybook should be getting picked up!

[rmevans9]

@mandarini there is one linked in the original ticket that shows the behavior