Does vite-tsconfig-paths support mono repo?

[tianyingchun]

Does vite-tsconfig-paths support mono repo? is there some document here?

[aleclarson]

There isn't automatic support for monorepos per sé, but I would like to support Yarn workspaces and PNPM workspaces in the future.

It depends on what you set root to in your Vite config. If you don't set it, the default value is the directory in which your Vite config is found. This plugin will crawl the root directory in search of tsconfig.json files and use them automatically.

If that doesn't work for you, you can try the projects option (see here).

[tianyingchun]

for now: i have an mono repo, https://github.com/armitjs/armit

/packages
  + cli
  + common

in packages/cli/i have vitest.config.ts

1. with tsconfig.json

   "baseUrl": "./src",
   "paths": {
     "@/test-utils": ["./test-utils/index.js"],
     "@/test-utils/": ["./test-utils/"],
     "@armit/common": ["../../common/src/index.js"]
   },

   2. in cli-info.spec.ts

      import { join } from 'path';
      import { getDirname, getPackageData } from '@armit/common';
      import { runCliMock } from '@/test-utils/cli-run-mock.js';

      i have setup vite-tsconfig-paths also as plugin in vitest.config.ts like

      
      import tsConfigPaths from 'vite-tsconfig-paths';
      import { defineConfig } from 'vitest/config';

export default defineConfig({ plugins: [tsConfigPaths({})], resolve: { // https://github.com/aleclarson/vite-tsconfig-paths/issues/54 alias: [ // handle @/* { find: /^(@\/.*).js$/, replacement: '$1.ts' }, ], },

> the import { runCliMock } from '@/test-utils/cli-run-mock.js'; works fine 
> but  import { getDirname, rmrfSync, unzip } from '@armit/common' is not

We can not typescript source loader from `/packages/common/src/index.ts` 

i use yarn 3+ workspace.

[aleclarson]

"@armit/common": ["../../common/src/index.js"]

Best practice is to use link:../../common in your devDependencies, instead of using tsconfig paths.

[tianyingchun]

yarn workspace support

  "dependencies": {
    "@armit/common": "workspace:^",

i think alias paths defined usng ts-config.json can make alias Consistency Configuration Management, cause of we have tsconfig-paths?

[aleclarson]

but I would like to support Yarn workspaces and PNPM workspaces in the future.

Tracking this in #73

[aleclarson]

i think alias paths defined usng ts-config.json can make alias Consistency Configuration Management, cause of we have tsconfig-paths?

If I understand you correctly, you want to use tsconfig.json paths to connect the packages in your monorepo. I don't want to support this, as it's not a common (or recommended) pattern. Better to use workspace dependencies.

[ccapndave]

I'm by no means an expert on this, but Nx recommends using tsconfig.json to connect the packages in a monorepo (https://nx.dev/getting-started/integrated-repo-tutorial).

[aleclarson]

I'm by no means an expert on this, but Nx recommends using tsconfig.json to connect the packages in a monorepo (nx.dev/getting-started/integrated-repo-tutorial).

Hmm, that makes no sense to me, but you can still use this plugin if that's what you're doing. Just set the projects option to ["../../tsconfig.base.json"] (assuming your Vite config is in ./packages/my-app).

If that doesn't work, you can try setting the root option to "../.." (once again assuming your Vite config is in ./packages/my-app). But make sure to leave projects option undefined if you do.

[ccapndave]

tsconfigPaths({ projects: ["../../tsconfig.base.json"] }) does the job. Cheers!

[airtonix]

i think alias paths defined usng ts-config.json can make alias Consistency Configuration Management, cause of we have tsconfig-paths?

If I understand you correctly, you want to use tsconfig.json paths to connect the packages in your monorepo. I don't want to support this, as it's not a common (or recommended) pattern. Better to use workspace dependencies.

It's actually a very common method in NX.dev monorepos (along with using references as much as possible)

The benefit of doing this is immense:

• time for the package installer to discover, resolve and install packages is reduced
• time for the IDE to discover, resolve packages is reduced.
• you no longer need tools like @manypkg/check to enforce a single version of react across your monorepo

When you have typescript monorepo of more than 200 packages, and you don't follow the above, install times can creep up above 10minutes, people stop using intellisense because it doesn't respond fast enough.

This approach can be used even if you're not using NX.dev, but then you'd loose the ability to draw a map of the dep graph of your monorepo and thus accurately trigger changes based on what is affected.

edit:

• in fact the official vite generator for NX.dev will setup a users app package with your plugin: https://github.com/nrwl/nx/blob/master/packages/vite/src/generators/init/init.ts#L33
• Here's how they setup the vite.config.ts : https://github.com/nrwl/nx/blob/master/packages/vite/src/utils/generator-utils.ts#L385-L388

[aleclarson]

Please see #77 and give feedback on how it works with NX

[mandarini]

Hi @aleclarson ! Thank you very much for everything!

I just tested v4. It's not working for Nx :(

Here's the interesting case:

When I do:

    tsconfigPaths({
      root: '../../',
      projects: ['tsconfig.base.json'],
    }),

it tries to find tsconfig.base.json outside my project's directory (2 directories up).

When I do:

    tsconfigPaths({
      projects: ['../../tsconfig.base.json'],
    }),

it finds tsconfig.base.json in the root of my project correctly, but it does not resolve the paths correctly. I get the error:

[vite]: Rollup failed to resolve import "@beta4/ui/three" from "libs/ui/four/src/lib/ui-four.tsx".

These both work as expected in v3.6.

I'm looking into it, but let me know if you have any idea what could have changed in v4 to affect that.

Here's my reproduction repository. It consists of two apps, which import a library, which imports another library.

Here is the dependency graph that illustrates what I mean:

rv1 is a React app with vite, and wv1 is a web components app with vite.

[aleclarson]

v4.0.0-alpha.6 is now out. Everyone give it a try in your Nx repo please :)

[mandarini]

YES! It works!!!

Only change need to be made on the Nx side is to just specify the root, relative to the workspace root. No need to provide projects.

So:

    tsconfigPaths({
      root: '../../',
    }),

Thank you so much @aleclarson !