Storybook + Vite: wrong root for vite-tsconfig-paths plugin

[sebastiandg7]

Current Behavior

The generated storybook v6 config with Vite as bundler extends the project's vite.config.ts with the vite-tsconfig-paths plugin. The problem is that the specified offset from root for that configuration is calculated relative to the <projectRoot>/.storybook directory, while the actual vite.config.ts resides in <projectRoot>/vite.config.ts making the vite-tsconfig-paths resolve the workspaceRoot as the Nx workspace parent directory.

The behavior above makes storybook fail depending on the content of the Nx workspace parent directory, that's why it works from one scenario to another.

Expected Behavior

The offset from root calculation should be done relative to the project's root containing the <projectRoot>/.storybook directory (one .. level less).

Like in this example:

GitHub Repo

No response

Steps to Reproduce

1. Create a dir, say playground
2. Create a project under playground/foo with a tsconfig.json that doesn't include baseUrl and/or paths in the compilerOptions.
3. Move to the playground directory: cd /path/to/playground
4. npx create-nx-workspace@latest acme --nx-cloud false --preset apps --pm pnpm
5. pnpm add -D @nrwl/react
6. pnpm nx g @nrwl/react:lib components --bundler vite
7. pnpm nx g @nrwl/react:storybook-configuration components
8. pnpm nx storybook components

Nx Report

➜ pnpm nx report                                
>  NX  Falling back to ts-node for local typescript execution. This may be a little slower.
  - To fix this, ensure @swc-node/register and @swc/core have been installed

 >  NX   Report complete - copy this into the issue template

   Node : 16.19.1
   OS   : darwin arm64
   pnpm : 7.22.0
   
   nx                      : 15.8.2
   @nrwl/js                : 15.8.2
   @nrwl/jest              : 15.8.2
   @nrwl/linter            : 15.8.2
   @nrwl/workspace         : 15.8.2
   @nrwl/cli               : 15.8.2
   @nrwl/cypress           : 15.8.2
   @nrwl/devkit            : 15.8.2
   @nrwl/esbuild           : 15.8.2
   @nrwl/eslint-plugin-nx  : 15.8.2
   @nrwl/next              : 15.8.2
   @nrwl/node              : 15.8.2
   @nrwl/react             : 15.8.2
   @nrwl/rollup            : 15.8.2
   @nrwl/storybook         : 15.8.2
   @nrwl/tao               : 15.8.2
   @nrwl/vite              : 15.8.2
   @nrwl/web               : 15.8.2
   @nrwl/webpack           : 15.8.2
   @nrwl/nx-cloud          : 15.1.1
   typescript              : 4.9.5
   ---------------------------------------
   Community plugins:
   @nx-tools/nx-container  : 4.0.3
   @nxext/stencil          : 15.6.0
   @nxkit/playwright       : 2.0.1
   @nxkit/style-dictionary : 2.1.0

Failure Logs

➜ pnpm nx storybook shared-core-ui-ui-components

> nx run shared-core-ui-ui-components:storybook

info @storybook/react v6.5.16
info 
info => Loading presets

info => Using cached manager
ERR! TypeError: Cannot destructure property 'baseUrl' of 'options' as it is undefined.
ERR!     at createResolver (/path/to/my/nx-workspace/node_modules/.pnpm/vite-tsconfig-paths@4.0.5_typescript@4.9.5/node_modules/vite-tsconfig-paths/dist/index.js:194:13)
ERR!     at /path/to/my/nx-workspace/node_modules/.pnpm/vite-tsconfig-paths@4.0.5_typescript@4.9.5/node_modules/vite-tsconfig-paths/dist/index.js:142:28
ERR!     at Set.forEach (<anonymous>)
ERR!     at configResolved (/path/to/my/nx-workspace/node_modules/.pnpm/vite-tsconfig-paths@4.0.5_typescript@4.9.5/node_modules/vite-tsconfig-paths/dist/index.js:133:22)
ERR!     at async Promise.all (index 3)
ERR!     at async resolveConfig (file:///path/to/my/nx-workspace/node_modules/.pnpm/vite@4.0.4_5lpa3ui7ztvnhqdw5vdu5qjpje/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:61833:5)
ERR!     at async Module.createServer (file:///path/to/my/nx-workspace/node_modules/.pnpm/vite@4.0.4_5lpa3ui7ztvnhqdw5vdu5qjpje/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:60910:20)

Additional Information

No response

[mandarini]

Hello @sebastiandg7 ! Thanks for filing an issue!

I unfortunately cannot reproduce your issue. Here is my reproduction repository. Please read the README. Make sure you are on branch paths-imports.

Can you please send me your reproduction repository, so that I can take a look and see what the issue may be?

[mandarini]

@sebastiandg7 here is another repro, which I think follows your steps in accuracy. I still cannot reproduce. Not in vite or in webpack. Please send me a reproduction repository and I will do my best to help you out!

Potential solution atm:

• rename tsconfig.base.json to tsconfig.json

But I am not sure I know your issue so I am not sure it will help!

[github-actions]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs.
If we missed this issue please reply to keep it active.
Thanks for being a part of the Nx community! 🙏

[mandarini]

@sebastiandg7 once this PR is in a Storybook release, your issue should be fixed! :D

[sebastiandg7]

That's awesome @mandarini! Sorry for nor replying before. Had a problem with my GitHub account and gain access back a couple days ago. You rock 💪🏻

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.