Tsdx: change rootDir to ./src cause trouble for storybook custom `/.storybook/config.ts` with require.context (Storybook <5.3)

[zhaoyao91]

Current Behavior

after receiving the warning to tell me changge the rootDir to ./src, the stroybook does not work no longer.

ERROR in /Users/bytedance/workspace/use-pick-files/tsconfig.json
[tsl] ERROR
      TS6059: File '/Users/bytedance/workspace/use-pick-files/.storybook/config.ts' is not under 'rootDir' '/Users/bytedance/workspace/use-pick-files/src'. 'rootDir' is expected to contain all source files.

ERROR in /Users/bytedance/workspace/use-pick-files/tsconfig.json
[tsl] ERROR
      TS6059: File '/Users/bytedance/workspace/use-pick-files/stories/use-pick-files.stories.tsx' is not under 'rootDir' '/Users/bytedance/workspace/use-pick-files/src'. 'rootDir' is expected to contain all source files.

Expected behavior

storybook works after changing the rootDir

Suggested solution(s)

Additional context

Your environment

| Software | Version(s) |
| ---------------- | ---------- |
| TSDX | 0.13.0
| TypeScript | 3.8.3
| Browser | chrome
| npm/Yarn | yarn 1.21.1
| Node | 12.14.1
| Operating System | mac os

[agilgur5]

Poop, thought this might be an issue after working on #638 which is very similar, but this is on the Storybook side, not the TSDX side. Was mentioned in https://github.com/jaredpalmer/tsdx/issues/440#issuecomment-601896367 .

Currently working on it but I think there's a workaround that seems to be safe, which is to use:

{
  "rootDirs": ["./src", "./stories", "./.storybook"]
}

Storybook seems to recommend a similar set-up

[zhaoyao91]

@agilgur5 confirmed, workaround works well!
this may be integrated into the template of react with storybook, to avoid having to search the issue for new projects.

[agilgur5]

That's great, thanks for confirming!

I did a lot of research and there's some discussion in #638, which is closely related to this -- there will be some changes to the templates, but I'm not sure if we'll use this specific one yet; we might be able to work it out a different way.
I still need to test what's possible with Storybook, as that's not something I looked into yet (#638 is about tests) and I also don't use it in any of my libraries at all yet, so I'm not really familiar with it.

[agilgur5]

So I tried reproducing this and was unable to do this with react-with-storybook template.

The Storybook config you're using in use-pick-files is quite different than the template. I was able to reproduce it with your config.

[agilgur5]

Ah, I figured it out -- your configuration is for Storybook 5.2 -- the templates use 5.3 (as of TSDX v0.13), which is a big change. In 5.3 you don't need require.context at all, you should use the stories: config with a glob in main.js.

See the Storybook 5.3 migration guide or TSDX's newer templates

[zhaoyao91]

@agilgur5 thanks for help
this is the original repo