[Windows DevDrive] Vite Reactでmain.tsxがロードされない。[vite] Pre-transform error: Failed to load url /main.tsx (resolved id: D:/***/src/main.tsx). Does the file exist?

# 結論

筆者の環境では、WindowsのDevDriveでVHDを利用していて、DevDrive内のディレクトリのなかにあるNode.jsアプリケーションでViteは使えなかった。
Viteを使う際はDevDriveでないディレクトリにアプリケーションを配置すべき

# 症状

```
> nvm --version
1.2.2
> node --version
v22.15.0
```

```Viteのコンソールのエラーメッセージ
PS C:\***** > npm run dev

> *****@0.0.0 dev
> vite


  VITE v5.4.18  ready in 413 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
21:36:26 [vite] Pre-transform error: Failed to load url /main.tsx (resolved id: D:/*****src/main.tsx). Does the file exist?
Files in the public directory are served at the root path.
Instead of /public/*****.png, use /*****.png.
21:36:26 [vite] Pre-transform error: Failed to load url /main.tsx (resolved id: D:/*****/src/main.tsx). Does the file exist?
21:36:38 [vite] Pre-transform error: Failed to load url /main.tsx (resolved id: D:/*****/src/main.tsx). Does the file exist? (x2)
Files in the public directory are served at the root path.
Instead of /public/*****.png, use /*****.png.
21:36:38 [vite] Pre-transform error: Failed to load url /main.tsx (resolved id: D:/*****/src/main.tsx). Does the file exist?
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653543/86364a31-6722-4b39-b990-dc77b25de327.png)

```
Uncaught SyntaxError: missing ) after argument list (at main.tsx:6:42)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653543/f3aaaba7-4fac-47c4-84e1-7019e5e63de1.png)

→ ReactのTypeScript、Javascriptが正常に実行されていない。

# ソースコード

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <link rel="icon" type="image/svg+xml" href="../public/******.png" />
    <meta charset="utf-8" />
    <title>******</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script type="module" src="/main.tsx"></script>
  </head>
<body>
  <div id="cantloadscript">
    <p>正しく読み込めませんでした。PC版Google Chromeで見てください。</p>
  </div>
  <div id="root"></div>
</body>
</html>
```

```main.tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
      <App />
  </StrictMode>,
)
```

```package.json
{
      "name": "*******",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "antd": "^5.21.5",
    "antd-style": "^3.7.1",
    "axios": "^1.7.7",
    "calla": "file:../..",
    "dotenv": "^16.4.5",
    "js-cookie": "^3.0.5",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-icons": "^5.3.0",
    "react-router-dom": "^6.27.0",
    "use-debounce": "^10.0.4",
    "webfontloader": "^1.6.28"
  },
  "devDependencies": {
    "@eslint/js": "^9.11.1",
    "@types/react": "^18.3.10",
    "@types/react-dom": "^18.3.0",
    "@types/webfontloader": "^1.6.38",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^9.11.1",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.12",
    "globals": "^15.9.0",
    "typescript": "^5.5.3",
    "typescript-eslint": "^8.7.0",
    "vite": "^5.4.8"
  }
}

```

```vite.confg.ts
import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react-swc'
import { resolve } from "node:path";

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, __dirname, '')
  return {
    // vite の設定
		base: "./",
		root: "src",
		plugins: [
			react()
		],
		build: {
			// distフォルダに出力
			outDir: resolve(__dirname, "dist"),
			// 存在しないときはフォルダを作成する
			emptyOutDir: true,
			copyPublicDir: true,
			rollupOptions: {
				// entry pointがあるindex.htmlのパス
				input: {
					"": resolve(__dirname, "src/index.html"),
				},
				// bundle.jsを差し替えする
				output: {
					entryFileNames: "assets/bundle.js",
					assetFileNames: (assetInfo) => {
						if (assetInfo.names == null || assetInfo.originalFileNames == null)
							return `assets/${assetInfo.name}`;
						if (assetInfo.originalFileNames.includes("index.html") && assetInfo.names.includes(".css"))
							return `assets/bundle.css`;
						return `assets/${assetInfo.name}`;
					},
				},
			},
		},
    define: {
      'process.env': env,
    },
  }
})
```

```tsconfig.json
{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "noUnusedLocals": false,
    "noUnusedParameters": false
  }
}
```

# 直った
アプリケーションのディレクトリをDevDrive外のディレクトリへ移動して再度`npm run dev`しただけで正常に実行された。

# コメント

ReFSにリポジトリ置いたら早いかなとか、ぜんぶVHDXに突っ込んどけばバックアップやP2V変換、データ移行まで楽にできるかなとか、考えてぜんぶDevDriveにしようとしたけど、そんな甘い話はなかった。う～

ちなみに　わたしは　ねこちゃん　大好きマンです