Simple buildable React Library does not work

[luckyluggi]

Project

I am new to nx, but i want to create a microfrontend application where all remotes share a componentlibrary.
From what i read i should create this componentlibrary as a buildable library.
So i tried to set that up like descriped in the Repro steps.
This simple setup build by running 2 nx generators throws the error mentioned at the end of this post.
Am i dping something wrong?
I have uploaded this project to github here: https://github.com/luckyluggi/nx_buildable_lib
I think this is a very basic usecase that most people might need, so i am surprised it doesnt work.
I really hope someone could help me solve this. Thanks in advance.

Repro steps

1. I created this Workspace via npx create-nx-workspace@latest --pm pnpm --workspaces
   With these Settings:
   √ Where would you like to create your workspace? · frontends
   √ Which stack do you want to use? · react
   √ What framework would you like to use? · none
   √ Application name · dashboard
   √ Would you like to use React Router for server-side rendering [https://reactrouter.com/]? · Yes
   √ Which unit test runner would you like to use? · vitest
   √ Test runner to use for end to end (E2E) tests · playwright
   √ Default stylesheet format · css
   √ Would you like to use ESLint? · No
   √ Would you like to use Prettier for code formatting? · No
   √ Which CI provider would you like to use? · azure
2. Then i added a component library like via pnpm nx g @nx/react:library designsystem --directory=libs/designsystem --buildable --publishable --importPath=@frontends/designsystem --unitTestRunner=vitest --compiler=swc and chose vite as a bundler
3. I added the autogenerated example component <FrontendsDesignsystem /> that i export from @frontends/designsystem in apps\dashboard\app\app.tsx.
4. I build the designsystem via pnpm nx build designsystem (and generated the typescript references when the cli asked me to)
5. I run the dashboard project via pnpm nx dev dashboard wich correctly runs the project
6. I get the following error in the browser:

Cannot find module '@frontends/designsystem' imported from 'C:/dev/_try/frontends/apps/dashboard/app/app.tsx'
    at fetchModule (file:///C:/dev/_try/frontends/node_modules/.pnpm/[email protected]_@[email protected]_3d70d28575673a50c5a66c23d6e498a0/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:46813:19)
    at RunnableDevEnvironment.fetchModule (file:///C:/dev/_try/frontends/node_modules/.pnpm/[email protected]_@[email protected]_3d70d28575673a50c5a66c23d6e498a0/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:47904:12)
    at fetchModule (file:///C:/dev/_try/frontends/node_modules/.pnpm/[email protected]_@[email protected]_3d70d28575673a50c5a66c23d6e498a0/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:47858:21)
    at handleInvoke (file:///C:/dev/_try/frontends/node_modules/.pnpm/[email protected]_@[email protected]_3d70d28575673a50c5a66c23d6e498a0/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:38973:28)
    at EventEmitter.listenerForInvokeHandler (file:///C:/dev/_try/frontends/node_modules/.pnpm/[email protected]_@[email protected]_3d70d28575673a50c5a66c23d6e498a0/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:39046:25)
    at EventEmitter.emit (node:events:518:28)
    at Object.send (file:///C:/dev/_try/frontends/node_modules/.pnpm/[email protected]_@[email protected]_3d70d28575673a50c5a66c23d6e498a0/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:25190:40)
    at Object.invoke (file:///C:/dev/_try/frontends/node_modules/.pnpm/[email protected]_@[email protected]_3d70d28575673a50c5a66c23d6e498a0/node_modules/vite/dist/node/module-runner.js:621:34)
    at Object.invoke (file:///C:/dev/_try/frontends/node_modules/.pnpm/[email protected]_@[email protected]_3d70d28575673a50c5a66c23d6e498a0/node_modules/vite/dist/node/module-runner.js:682:34)
    at SSRCompatModuleRunner.getModuleInformation (file:///C:/dev/_try/frontends/node_modules/.pnpm/[email protected]_@[email protected]_3d70d28575673a50c5a66c23d6e498a0/node_modules/vite/dist/node/module-runner.js:1205:94
Click outside, press Esc key, or fix the code to dismiss.
You can also disable this overlay by setting server.hmr.overlay to false in vite.config.ts.

[luckyluggi]

Thanks for your help.
Now it works.

After googling the Plugin i found dis documentation. thats where i probably should have looked:
https://nx.dev/technologies/build-tools/vite/recipes/configure-vite

According to that i can also import from @nx/vite/plugins/nx-tsconfig-paths.plugin without installing vite-tsconfig-paths is that also recommended?