ふとしです。

このブログでは編集画面で CodeMirror6 を使っていますが、起動時に例外が出てしまいます。

Uncaught TypeError: Cannot read properties of undefined (reading 'LOG')
    at index.js:800:79

原因

エラーの箇所にコードジャンプしてみると以下の通り。

const verbose = typeof process != "undefined" && /\bparse\b/.test(process.env.LOG);

process はあるのに env がないので無事例外発生というわけです。process があるから Nodejs 上で使ってるんだろうし env ももちろんあるやろってアクセスしたらこの有様というわけですね。

ご存知の通り Nuxt では process.server という今はサーバー上での処理中です、あるいはちがいますといったフラグをサーバーでもブラウザでも取れるように常に process が存在するのでこういう例外が発生してしまいます。

対応

Nuxt2 では Webpack の defineComponent？などで対応できますが Nuxt3 からはデフォルトで Vite が使われているので Vite の define パラメーターを使って変数などを書き換えることができます。

ただし Vite のコンフィグファイルからではなく nuxt.config.js から設定を行えるので、そちらに追記します。渡す値は JSON.stringify されたものであることに注意しましょう。

export default defineNuxtConfig({
  vite: {
    define: {
      'process.env.LOG': '""',
    },
  },
});

解決

これで例外が出なくなり、無事 CodeMirror6 で快適に編集できるようになりました。