Importing library from vite react app not working

[vincent-thomas]

Describe the bug when i try to import a library in the nx repo (from /libs dir) it says the file does not exist. I imported it with compilerOptions.paths but i've also tried normal import (../../../libs/library).

To Reproduce Steps to reproduce the behavior:

create a nx monorepo with create-nx-workspace

create a vite react app with this plugin

create a react library with the standart @nrwl/react command

import it to the vite app

Expected behavior

That the lib does import and will work as expected

To redroduce I have this repo here: https://github.com/VincentThomas06/issue-vite

[linbudu599]

Sorry, this is indeed a mistake.

Add "extends": "../../tsconfig.base.json" at the first line of vite-app/tsconfig.json should make it works normally.

[linbudu599]

This was fixed in latest release nx-plugin-vite@1.6.0

[vincent-thomas]

This was fixed in latest release nx-plugin-vite@1.6.0

But you can see in the app/tsconfig.json that i extended the base tsconfig, its still not fixed. Can you point in the right direction what i can do to make it work?

[linbudu599]

@VincentThomas06 I got what you mean now, as Vite use special dep resolution, you will need vite-tsconfig-paths to make compilerOptions.paths avaliable in Vite app.

import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
import tsconfigPaths from 'vite-tsconfig-paths';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [tsconfigPaths(), reactRefresh()],
});

Then it works correctly:

[vincent-thomas]

@VincentThomas06 I got what you mean now, as Vite use special dep resolution, you will need vite-tsconfig-paths to make compilerOptions.paths avaliable in Vite app.

import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
import tsconfigPaths from 'vite-tsconfig-paths';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [tsconfigPaths(), reactRefresh()],
});

Then it works correctly:

I'll try that when i am at my desk. If it works i'll close this issue. Thanks for your help. This is kind of unclear of how you are able to have libs in vite apps and is the whole point of Nx. I think it would be easier if this is covered in this repo's docs

[linbudu599]

I have added the documentation along with the last reply, see https://nx-plugins.netlify.app/vite/#note, the main reason for this problem is that Vite compiles on-demand for dependencies and it needs the tsconfig paths plugin to help calculate the alias-based import within the workspace, whereas Nx or other plugins (based on webpack) that use a full dependency compilation strategy, do this process through source code analysis.

[vincent-thomas]

This actually worked! Now i can use this plugin for my real apps! Thanks @linbudu599 for the effort of creating these plugins! Would like to help if i can. Maybe some docs or maybe refactoring code? I saw that the astro plugin needs working on. Im going to close this issue now because well.. its no longer an issue.

[linbudu599]

In addition to work I can only focus on Nx related plugins on weekends, many of them need a complete update, I will make it this weekend and provide some guidelines for contributions, and thank you for your feedback!