Cannot build using symlinks. v4.4.x

[iyulab-caveman]

Describe the bug

Build fails when adding the src folder using a symbolic link.
In v4.3.9, it succeeds and the v4.4.x fails.

---

vite v4.4.3 building for production...
✓ 7 modules transformed.
✓ built in 102ms
Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
file: D:/data/test/vite-lib/src/hello-element.ts:12:0
10: * @csspart button - The button
11: /
12: @CustomElement('hello-element')
^
13: export class HelloElement extends LitElement {
14: /*
error during build:
RollupError: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
at error (file:///D:/data/test/vite-proj/node_modules/rollup/dist/es/shared/node-entry.js:2245:30)
at Module.error (file:///D:/data/test/vite-proj/node_modules/rollup/dist/es/shared/node-entry.js:13584:16)
at Module.tryParse (file:///D:/data/test/vite-proj/node_modules/rollup/dist/es/shared/node-entry.js:14310:25)
at Module.setSource (file:///D:/data/test/vite-proj/node_modules/rollup/dist/es/shared/node-entry.js:13911:39)
at ModuleLoader.addModuleSource (file:///D:/data/test/vite-proj/node_modules/rollup/dist/es/shared/node-entry.js:24439:20)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Reproduction

https://stackblitz.com/edit/vitejs-vite-nfqpju?file=index.html&terminal=dev

Steps to reproduce

1. Create two projects.
One is a public library, and the other is a project that uses the library.

> yarn create vite
Proejct Name: vite-lib
Select a fraemwork: lit
Select a variant: typescript


> yarn create vite
Proejct Name: vite-proj
Select a fraemwork: lit
Select a variant: typescript

2. Configure a symlink to configure the development environment.

> cd vite-proj

> mklink /J "D:\data\test\vite-proj\lib-src" "D:\data\test\vite-lib\src"

Note that `D:\data\test` is the folder for my tests, which I need to change to reproduce.

3. Rename: vite-lib/src/my-element.ts
For the sake of experimentation, I renamed my-element in vite-lib. I also changed the hello-element class name from MyElement to HelloElement.

4. Using the library in vite-proj

Now, to use the library, include it in my element.

// vite-proj/src/my-element.ts
...
Import '../lib-src/hello-element';
...
render() {
    Return HTML `
    <H1>HELLO</H1>
    <hello-element></hello-element>.
    `
  }

5. Run after build

> npm run build

Fails.
An error message is displayed.

Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
file: D:/data/test/vite-lib/src/hello-element.ts:12:0
10:  * @csspart button - The button
11:  */
12: @customElement('hello-element')
    ^
13: export class HelloElement extends LitElement {
14:   /**
error during build:
RollupError: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
    at error (file:///D:/data/test/vite-proj/node_modules/rollup/dist/es/shared/node-entry.js:2245:30)
    at Module.error (file:///D:/data/test/vite-proj/node_modules/rollup/dist/es/shared/node-entry.js:13584:16)
    at Module.tryParse (file:///D:/data/test/vite-proj/node_modules/rollup/dist/es/shared/node-entry.js:14310:25)
    at Module.setSource (file:///D:/data/test/vite-proj/node_modules/rollup/dist/es/shared/node-entry.js:13911:39)
    at ModuleLoader.addModuleSource (file:///D:/data/test/vite-proj/node_modules/rollup/dist/es/shared/node-entry.js:24439:20)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

6. Change the version.

// package.json
"vite": "4.3.9"

Execute

npm run build

On v4.3.9, this succeeds.
Fails in v4.4.x.

// I was unable to experiment with symlinks on stackblitz.com.

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 13th Gen Intel(R) Core(TM) i7-1360P
    Memory: 21.54 GB / 31.57 GB
  Binaries:
    Node: 18.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.8.0 - ~\AppData\Roaming\npm\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1992.0), Chromium (114.0.1823.79)
    Internet Explorer: 11.0.22621.1

Used Package Manager

npm

Logs

No response

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.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-nfqpju (Open reproduction)

[bluwy]

This looks like a variation of #13736, but the symlink makes Vite unable to match the related tsconfig.json to read the compilerOptions.experimentalDecorators config.

[stefanholzapfel]

I have the same problem.

I have a npm published library which I sometimes link directly into a project for faster development. Build works as long as the npm package is directly installed in node_modules but breaks as soon as I "npm link" it.

[stefanholzapfel]

@iyulab-caveman

Forcing Vite to use the tsconfig.ts (and activating experimentalDecorators there) by adding this to vite.config.ts did it for me:

  optimizeDeps: {
    esbuildOptions: {
      tsconfig: 'tsconfig.json'
    }
  },

See: #13736 (comment)

[stefanholzapfel]

Just switching to Vite 4.4.4 (where experimental decorators should be activated by default) didn't work for me btw.

[v-anton]

@iyulab-caveman

Forcing Vite to use the tsconfig.ts (and activating experimentalDecorators there) by adding this to vite.config.ts did it for me:

  optimizeDeps: {
    esbuildOptions: {
      tsconfig: 'tsconfig.json'
    }
  },

See: #13736 (comment)

Have same issue, and this solution helped.

[iyulab-caveman]

vite.config.ts

I solved this problem

vite.config.ts

resolve: {
    alias: [ ... ],
    preserveSymlinks: true
  },