Adding typescript in vue@3 causes an invalid state of the project that fails to build

[Plagiatus]

I went with the following configuration:

npm init vue@3

Vue.js - The Progressive JavaScript Framework

√ Project name: ... client
√ Add TypeScript? ... Yes
√ Add JSX Support? ... Yes
√ Add Vue Router for Single Page Application development? ... No / Yes (tried with both)
√ Add Vitest for Unit Testing? ... No
√ Add Cypress for both Unit and End-to-End testing? ... No
√ Add ESLint for code quality? ... No

after running npm install, which gave me these three warnings:

npm WARN deprecated vscode-pug-languageservice@0.31.4: WARNING: This project has been renamed to @volar/pug-language-service. Install using @volar/pug-language-service instead.
npm WARN deprecated vscode-typescript-languageservice@0.31.4: WARNING: This project has been renamed to @volar/typescript-language-service. Install using @volar/typescript-language-service instead.
npm WARN deprecated vscode-vue-languageservice@0.31.4: WARNING: This project has been renamed to @volar/vue-language-service. Install using @volar/vue-language-service instead.

I tried to run npm run dev and I'm getting the following error:

npm run dev

> client@0.0.0 dev
> vite

X [ERROR] Cannot read file "../../../..": The handle is invalid.

    html:<redacted>/client/index.html:1:7:
      1 │ import "/src/main.ts"
        ╵        ~~~~~~~~~~~~~~

error when starting dev server:
Error: Build failed with 1 error:
html:<redacted>/client/index.html:1:7: ERROR: Cannot read file "../../../..": The handle is invalid.
    at failureErrorWithLog (<redacted>\client\node_modules\esbuild\lib\main.js:1599:15)
    at <redacted>\client\node_modules\esbuild\lib\main.js:1245:28
    at runOnEndCallbacks (<redacted>\client\node_modules\esbuild\lib\main.js:1030:63)
    at buildResponseToResult (<redacted>\client\node_modules\esbuild\lib\main.js:1243:7)
    at <redacted>\client\node_modules\esbuild\lib\main.js:1352:14
    at <redacted>\client\node_modules\esbuild\lib\main.js:662:9
    at handleIncomingPacket (<redacted>\client\node_modules\esbuild\lib\main.js:759:9)
    at Socket.readFromStdout (<redacted>\client\node_modules\esbuild\lib\main.js:629:7)
    at Socket.emit (node:events:394:28)
    at addChunk (node:internal/streams/readable:312:12)
npm ERR! code 1

[haoqunjiang]

Can't reproduce. Is this project created inside a monorepo? Or does the ../../../.. directory contains something special?

[Plagiatus]

no, it should not be inside a monorepo. Turns out the folder that it is inside of located at ../../../.. starts with the # character: #Daten. Might that be the issue?
I have multiple vue projects in folders adjacent to the work directory and none of them complain about this problem. This is the first one that I've created through create-vue as opposed to vue-cli previously.

[haoqunjiang]

Yeah, I think so.
Let's track this issue in Vite: vitejs/vite#6763

[robynhoodoriginal]

no, it should not be inside a monorepo. Turns out the folder that it is inside of located at ../../../.. starts with the # character: #Daten. Might that be the issue? I have multiple vue projects in folders adjacent to the work directory and none of them complain about this problem. This is the first one that I've created through create-vue as opposed to vue-cli previously.

My project was inside a directory that started with a #. Changing the folder name fixed the issue.