Vuetify3 Beta環境で、process.env.DEBUGにアクセスできない

（以前社内ブログに投稿していた記事の再掲です）

Nuxt3 Beta + Vuetify3 Beta環境で発生するUncaught TypeError: Cannot read properties of undefined (reading ‘DEBUG’)エラーとその対処法についてまとめました。

発生エラーについて

状況としては、DevToolのコンソールに以下エラーが表示される、v-onなどのディレクティブが動作せず反応しないなどです。

process.env.DEBUGにアクセスできないことが原因のようでした。

Uncaught TypeError: Cannot read properties of undefined (reading 'DEBUG')

解決策

こちらの記事を参考に、nuxt.config.tsを以下のように変更することで解決しました。

1. @vuetify/vite-pluginが@vitejs/plugin-vueの後に読み込まれるよう順序を変更

2. @ts-ignoreでTypeScriptの型エラーを無視させる

1. process.env.DEBUGにアクセスできない問題を回避するハックを追加

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  serverMiddleware: [
    { path: "/server-api", handler: "~/server-middleware/index.ts" },
  ],
  css: ['vuetify/lib/styles/main.sass'],
  build: {
    transpile: ['vuetify']
  },
  vite: {
    plugins: [
      {
        // https://github.com/nuxt/framework/issues/2798
        configResolved(config) {
          const vuetifyIdx = config.plugins.findIndex(
            (plugin) => plugin.name === "vuetify:import"
          );
          const vueIdx = config.plugins.findIndex(
            (plugin) => plugin.name === "vite:vue"
          );
          if (~vuetifyIdx && vuetifyIdx < vueIdx) {
            const vuetifyPlugin = config.plugins[vuetifyIdx];
            // @ts-ignore
            config.plugins.splice(vuetifyIdx, 1);
            // @ts-ignore
            config.plugins.splice(vueIdx, 0, vuetifyPlugin);
          }
        },
      },
    ],
    define: {
      "process.env.DEBUG": "false",
    },
  },
})

参考

https://zenn.dev/winteryukky/articles/87a40b60fddb96