error TS2339が発生したときの解決策

npm run build を叩いたら error TS2339: Property 'env' does not exist on type 'ImportMeta'. が発生した

TypeScriptとVue3のキャッチアップのためにTodoリストを作っていた時に遭遇したエラー。

とりあえず機能を実装して、「いざビルドや！」と思って npm run build を叩いたら、

$ docker-compose run frontend npm run build

> todo@0.0.0 build
> run-p type-check "build-only {@}" --


> todo@0.0.0 build-only
> vite build


> todo@0.0.0 type-check
> vue-tsc --build --force

vite v5.3.3 building for production...
✓ 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.29 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-Bb8bxnic.css       3.22 kB │ gzip:  1.08 kB
dist/assets/AboutView-QAvv8BwZ.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-DGIn98VC.js       90.26 kB │ gzip: 35.55 kB
✓ built in 2.38s
src/router/index.ts:5:41 - error TS2339: Property 'env' does not exist on type 'ImportMeta'.

5   history: createWebHistory(import.meta.env.VITE_BASE_URL),
                                          ~~~


Found 1 error.

ERROR: "type-check" exited with 1.

という感じでエラーが発生。

env.d.ts は下記のようにしており、

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string;
  readonly VITE_BASE_URL: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}
​

index.ts は下記のようにしていた。

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.VITE_BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

​ ChatGPT先生も、「 env.d.ts を作成して、vite/client の型定義を追加したら、 import.mete.env を認識させればOKや！」みたいな感じの答えしかなかった。

共有してくれたコードで修正しても解決せず。

Viteのエラーによるもの？

調べてみると、どうやらViteのissue9539にあるようにViteのバグ？っぽい。

github.com

そのうちの下記のコメントの通りに、 tsconfig.json の "complileOptions" に "types": ["node", "vite/client"] を追加したらエラーが発生せずビルドが完了した。

$ docker-compose run frontend npm run build

> todo@0.0.0 build
> run-p type-check "build-only {@}" --


> todo@0.0.0 build-only
> vite build


> todo@0.0.0 type-check
> vue-tsc --build --force

vite v5.3.3 building for production...
✓ 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.29 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-Bb8bxnic.css       3.22 kB │ gzip:  1.08 kB
dist/assets/AboutView-QAvv8BwZ.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-DGIn98VC.js       90.26 kB │ gzip: 35.55 kB
✓ built in 2.31s

参照ドキュメント

Property 'env' does not exist on type 'ImportMeta' in 3.0.0 #9539

Property 'env' does not exist on type 'ImportMeta' in 3.0.0 · Issue #9539 · vitejs/vite · GitHub