vitejs / vite

Next generation frontend tooling. It's fast!
http://vitejs.dev
MIT License
67.49k stars 6.08k forks source link

Symlink only supports set of libararies #16706

Open mjwsteenbergen opened 4 months ago

mjwsteenbergen commented 4 months ago

Describe the bug

I am very confused. I have the following folder structure:

├─ content-folder/
│  └─ file1
├─ vite-folder/
│  ├─ src/
│  │  ├─ app -> symlink that points to `content-folder`
│  │  └─ main.tsx
│  ├─ package.json
│  └─ vite.config.ts

Without using any libraries in content-folder, vite compiles everything correctly. Using any library will give the error:

Failed to resolve import "<Your Library>" from "../content-folder/file1.tsx". Does the file exist?

There is one exception: React. Imports from React, like useState are fine to use and will not break. Are you confused too? Do you not believe me (I wouldn't either)? Use the stackblitz with the steps to reproduce below.

Why do I want to do this weird stuff I have multiple little react applications. I do not want to have to update them seperately. So I want to create a main repo with all the vite, tailwind, typescript, eslint and other configuration, I can clone as a submodule, so I don't have to keep 5 different projects updated.

Reproduction

https://stackblitz.com/edit/vitejs-vite-tjryyi

Steps to reproduce

In the stackblitz, execute the following commands:

cd project/
npm install
cd src
rm code
ln -s ../../code ./code
cd ..
npm run dev
  1. See that it errors with: Failed to resolve import "iconoir-react" from "../code/App.tsx". Does the file exist?
  2. Comment out <QuestionMark /> on line 22 in `code/App.tsx
  3. See that the page loads and that react useState are correctly resolved

System Info

**StackBlitz**

 System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @vitejs/plugin-react: ^4.2.1 => 4.2.1 
    vite: ^5.2.11 => 5.2.11 

**Personal Github Codespaces**
System:
    OS: Linux 6.5 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (2) x64 AMD EPYC 7763 64-Core Processor
    Memory: 3.93 GB / 7.74 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 20.12.1 - ~/nvm/current/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 10.5.0 - ~/nvm/current/bin/npm
    pnpm: 8.15.6 - ~/nvm/current/bin/pnpm
  npmPackages:
    @vitejs/plugin-react: ^4.2.1 => 4.2.1 
    vite: ^5.2.0 => 5.2.11

Used Package Manager

npm

Logs

No response

Validations

stackblitz[bot] commented 4 months ago

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

hi-ogawa commented 4 months ago

I didn't even know such symlink outside of vite.config.ts root would work, but for this specific peculiar behavior is probably coming from react plugin automatically adding resolve.dedupe: ["react", ...] https://github.com/vitejs/vite-plugin-react/blob/814ed8043d321f4b4679a9f4a781d1ed14f185e4/packages/plugin-react/src/index.ts#L273 which allows resolving project/node_modules/react from anywhere (which is not a standard NodeJs node_modules resolution).

Technically your repro can be fixed if you add 'iconoir-react' there, but I think what you're trying to do is unusual vite setup, so it wouldn't be surprising if something else breaks and requires more workaround later on. https://stackblitz.com/edit/vitejs-vite-61deqy?file=project%2Fvite.config.ts

export default defineConfig({
  plugins: [react()],
  resolve: {
    dedupe: ['iconoir-react']
  }
})
mjwsteenbergen commented 3 months ago

so it wouldn't be surprising if something else breaks and requires more workaround later on

Yeah, I'll try something else then. If you're interested, I tried your workaround and it did not work