ViteとVue3を使用したbuildでつまづいた話

ViteとVue3を使用した開発での一般的なエラーとその解決方法

開発中に遭遇する問題は避けられないものです。特に新しいツールやライブラリを取り入れた時、予期せぬエラーに直面することがあります。この記事では、ViteとVue3を使用した開発中に私が遭遇し、解決したいくつかの一般的なエラーについて紹介します。

1. Uncaught ReferenceError: global is not defined

問題

Vue3とViteを使って開発中、aws-sdkライブラリを追加したところ、Uncaught ReferenceError: global is not definedというエラーが発生し、画面が正常にレンダリングされなくなりました。

解決策

vite.config.jsファイルにグローバルオブジェクトの定義を追加することで解決しました。具体的には、global: 'window'を定義部分に追加することで、globalとwindow間の互換性を確保し、エラーを解消しました。

参考：React×Viteでの同様の問題に対する解決策

2. npm run build時のエラー

問題

ビルドコマンドnpm run buildを実行した際にエラーが発生しました。開発中は問題なく動作していましたが、ビルド時にエラーが出現しました。

解決策

以下の2つのエラーに対する解決策を実施しました。

1. グローバル変数定義の問題:
   vite.config.js内で"window.global": {}を定義することで解決しました。

2. AWS SDKのエラー:
   vite.config.jsに特定のエイリアスを追加することで解決しました。

3. ビルド後のファイルのエラー

問題

ビルドしたファイルをアップロードすると、コンソールでVite production build errors: ...is not a constructor' for node_modulesというエラーが発生しました。

解決策

Esbuild Deps Optimizationをビルド時に使用し、optimizeDeps.disabled = falseとbuild.commonjsOptions.include = []を設定することで解決しました。

参考：Stack Overflowでの同様の問題に対する解決策

4. 開発サーバーでのエラー

問題

Vite開発サーバーでサーブされた後、Uncaught ReferenceError: global is not definedというエラーが発生しました。

解決策

vite.config.js内で、Node.jsのglobalをブラウザのglobalThisにマッピングする設定を追加することで解決しました。

参考：GitHubでの同様の問題に対する解決策

5. 最終的なvite.config.jsの設定

以下は、上記の問題を解決する

ために適用したvite.config.jsの最終的な設定です。

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      "./runtimeConfig": "./runtimeConfig.browser",
    }
  },
  define: {
    "window.global": {},
  },
  build: {
    commonjsOptions: { include: [] },
  },
  optimizeDeps: {
    disabled: false,
    esbuildOptions: {
      define: {
        global: 'globalThis',
      },
    },
  },
})

この設定により、ViteとVue3を使用した開発中に遭遇した一般的なエラーを解決することができました。同様の問題に直面した開発者にとって、この記事が役立つことを願っています。

---

本記事はKCompanyの技術ブログです。