結論
筆者の環境では、WindowsのDevDriveでVHDを利用していて、DevDrive内のディレクトリのなかにあるNode.jsアプリケーションでViteは使えなかった。
Viteを使う際はDevDriveでないディレクトリにアプリケーションを配置すべき
症状
> nvm --version
1.2.2
> node --version
v22.15.0
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?
Uncaught SyntaxError: missing ) after argument list (at main.tsx:6:42)
→ 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にしようとしたけど、そんな甘い話はなかった。う～
ちなみに わたしは ねこちゃん 大好きマンです