【Vite】謎のエラーが発生

環境情報

  • Vite: v3.2.5

Viteで謎のエラー

viteを使用していて謎のエラーが起きて困ってました。エラーの対象箇所がconsole.logの行になっていて本当に意味が分からなかったです。

Unexpected token (Note that you need plugins to import files that are not JavaScript)
file: /home/i_shinya/dev/grimoire/viewer/src/main.ts:83:69
81:     break;
82:   default:
83:     console.log("[WARN] import.meta.env.VITE_BUILD_MODE is not found");
                                                                         ^
84:     directoryAPI = new DirectoryNodeAPI();
85:     windowAPI = new WindowNodeAPI();
error during build:
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (file:///home/i_shinya/dev/grimoire/viewer/node_modules/rollup/dist/es/shared/rollup.js:1858:30)
    at Module.error (file:///home/i_shinya/dev/grimoire/viewer/node_modules/rollup/dist/es/shared/rollup.js:12429:16)
    at Module.tryParse (file:///home/i_shinya/dev/grimoire/viewer/node_modules/rollup/dist/es/shared/rollup.js:12806:25)
    at Module.setSource (file:///home/i_shinya/dev/grimoire/viewer/node_modules/rollup/dist/es/shared/rollup.js:12711:24)
    at ModuleLoader.addModuleSource (file:///home/i_shinya/dev/grimoire/viewer/node_modules/rollup/dist/es/shared/rollup.js:21959:20)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
npm ERR! Lifecycle script `vite:demo-build` failed with error:
npm ERR! Error: command failed
npm ERR!   in workspace: viewer@0.1.0
npm ERR!   at location: /home/i_shinya/dev/grimoire/viewer

直ったけど意味わからん

結局原因なのですが、console.logで出力するメッセージが原因のようです。

色々試している中でconsole.logの行をコメントアウトするとエラーが起きなくなり、viteの構文解析バグっぽい気がしたので、試しに出力するメッセージを

console.log("[WARN] import.meta.env.VITE_BUILD_MODE is not found");

から

console.log("[WARN] VITE_BUILD_MODE is not found");

に変更するとエラーが起きなくなりました。

viteの構文解析のバグっぽいですね。