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

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