How to configure Vite with the new Typescript Project Linking feature?

[electrocnic]

Documentation issue

• Reporting a typo
• Reporting a documentation bug
• Documentation improvement
• Documentation feedback

Is there a specific documentation page you are reporting?

Typescript Project Linking
and
Switch to Workspaces and Project References

Additional context or description

These pages give me no clue, how I need to configure Vite in my monorepo to let it resolve the path aliases with the workspaces and references in the tsconfigs.

Previously, a vite.config.ts used the nxViteTsPaths plugin and I had path aliases in the tsconfig.base.json.

Now, I get

[vite]: Rollup failed to resolve import "@testalias" from "C:/test-workspaces-nx-vite/apps/test-workspaces-nx-vite/src/app/app.tsx".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

when I create a new repo with npx create-nx-workspace --workspaces, choosing:

[email protected]
√ Where would you like to create your workspace? · test-workspaces-nx-vite
√ Which stack do you want to use? · react
√ What framework would you like to use? · none
√ Application name · test-workspaces-nx-vite
√ Which bundler would you like to use? · vite
√ Test runner to use for end to end (E2E) tests · none
√ Default stylesheet format · tailwind
√ Would you like to use ESLint? · Yes
√ Would you like to use Prettier for code formatting? · Yes
√ Which CI provider would you like to use? · skip
√ Would you like remote caching to make your build faster? · skip

and then adding a lib with the @nx/js generator with npx nx generate @nx/js:library --directory=libs/test-project-references --bundler=none --importPath=@myorg/test-project-references --linter=eslint --name=test-project-references --unitTestRunner=none --no-interactive

I could get it working, but the sync command does not automatically add anything to the initial app if I include the new lib in the app and the documentation does not give any information about possible differences between buildable and non-buildable libs.

It took me a while to get this working, only after I tried it with the steps above, creating a fresh repo. I could not get it working initially with my existing repo, this is why I figured, an improvement in the docs for this feature could still be a good idea.

One really big major hickup when I tried to migrate my existing nx project to the new references was, that I missed to run npm i after I configured the devDependencies for my apps and libs in order to resolve the rollup error message and get the project compiled.