Vite >=3.0.1 fails to resolve projects in monorepo

[lukashroch]

Describe the bug

Vite 3.0.1 and higher does not seem to resolve projects within the monorepo.

E.g. we got structure:

├─ apps
│  └─ app1
          └─ vite.config.ts
│  └─ app2
└─ packages
   └─ package1
   └─ package2

Since [email protected]., I'm getting the error below:

Error: Cannot find module 'C:\Apps\repo\packages\common\src\types'
Require stack:
- C:\Apps\repo\apps\admin\vite.config.ts
- C:\Apps\repo\node_modules\.pnpm\[email protected][email protected]\node_modules\vite\dist\node\chunks\dep-1513d487.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (C:\Apps\repo\apps\admin\vite.config.ts:117:20)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object._require.extensions.<computed> [as .js] (file:///C:/Apps/repo/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-1513d487.js:62817:24)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)

This was working fine up till [email protected] and breaks in [email protected] and up.

Vite now fails on relative import in vite.config.ts

import { something } from '../../packages/common/src/types';

Is there a more proper way to do this in vite?

Reproduction

https://stackblitz.com/edit/vitejs-vite-wg28sd?file=apps/app/vite.config.ts

cd apps/app
npm install
npm run build

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (4) x64 Intel(R) Core(TM) i3-8100 CPU @ 3.60GHz
    Memory: 3.85 GB / 15.86 GB
  Binaries:
    Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.1.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 103.0.5060.114
    Edge: Spartan (44.22000.120.0), Chromium (102.0.1245.44)
    Internet Explorer: 11.0.22000.120

[email protected]

Used Package Manager

pnpm (own project) / npm (stackblitz)

Logs

Error: Cannot find module 'C:\Apps\repo\packages\common\src\types'
Require stack:
- C:\Apps\repo\apps\admin\vite.config.ts
- C:\Apps\repo\node_modules\.pnpm\[email protected][email protected]\node_modules\vite\dist\node\chunks\dep-1513d487.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (C:\Apps\repo\apps\admin\vite.config.ts:117:20)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object._require.extensions.<computed> [as .js] (file:///C:/Apps/repo/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-1513d487.js:62817:24)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[bluwy]

Likely a regression from #9140. We're bundling the Vite config and all the related files, but because the relative imports point to a file from a package that could have it's own node_modules, we can't bundle that file. So what happens is that node is trying to load the file in runtime, which doesn't work as it doesn't handle TS.

The original issue looks like a workaround for #5370, which doesn't work in the first place. Given this had worked in Vite 3.0.0, maybe it's worth finding a reasonable fix at the meantime, but the better solution overall is to compile the package as JS first.

[lukashroch]

@bluwy thanks for your reply, I see that now!

It doesn't make much sense for me to build it in this particular case as it's mostly various shared code being pulled in to apps that take care of the build, whatever if pulled in. Also I had couple of reusable fragments for vite.config.ts in that place as we have multiple vue apps, so wanted to share same pieces. And that's when I started to have issues with vite@>=3.0.1.

For now, I ended up extracting fragments for vite build out of package with package.json / node_modules, which works OK as expected. But if this could be fix, that would be great.

[bluwy]

I've been thinking about this and it's quite tricky in general to support this. It's either:

1. We rewrite the import paths for files in a different package.
2. Or bundle the file's dependencies.

And both aren't really good choices. The logic for bundling config files is also quite complex now since we had recent issues after Vite 3, and I'm hoping to not touch it anymore.

We might have to intentionally break this in 3.0.1 (even though I hate to break semver), but given that it's a workaround before, and it's only 1 patch away. Maybe that's still acceptable.

[KubaJastrz]

Same thing happens with vitest@^0.17, as it uses the same mechanism for compiling TS config file.

the better solution overall is to compile the package as JS first

What if you don't have a compilation step? I'm using a shared package for defining config like so: https://stackblitz.com/edit/vitejs-vite-esn1xa?file=app%2Fvite.config.ts

It worked with vite@=<3.0.0.