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

[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 !