Nuxt3 のビルドに失敗する

Nuxt３でブログ作成時にビルドに失敗した一時的な解決策。

やりたいこと

• Nuxt3でブログ作成
• ビルドして Vercel でデプロイする

バージョン

Node: v16.15.0
Nuxt: 3.3.1
vuetify: 3.1.4

ビルドする

$ yarn build

エラー内容

~~ 省略 ~~

✔ Server built in 2859ms 
✔ Generated public .output/public
ℹ Building Nitro Server (preset: node-server)

ERROR  RollupError: Could not resolve "./_nuxt/VContainer-styles.a03b508f.mjs" from ".nuxt/dist/server/styles.mjs"

undefined

ERROR  Could not resolve "./_nuxt/VContainer-styles.a03b508f.mjs" from ".nuxt/dist/server/styles.mjs"

  at error (node_modules/rollup/dist/es/shared/node-entry.js:2125:30)
  at ModuleLoader.handleInvalidResolvedId (node_modules/rollup/dist/es/shared/node-entry.js:23776:24)
  at ModuleLoader.resolveDynamicImport (node_modules/rollup/dist/es/shared/node-entry.js:23834:58)
  at async node_modules/rollup/dist/es/shared/node-entry.js:23723:32

error Command failed with exit code 1.

対応方法

こちらの issue を参考にnuxt.config.tsに以下を追記

typescript：nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
import { defineNuxtConfig } from "nuxt/config";
import vuetify from "vite-plugin-vuetify";

export default defineNuxtConfig({
  build: {
    transpile: ["vuetify"],
  },
  hooks: {
    "vite:extendConfig": (config) => {
      config.plugins!.push(vuetify());
    },
  },
  vite: {
    ssr: {
      noExternal: ["vuetify"],
    },
    define: {
      "process.env.DEBUG": false,
    },
  },
  css: ["@/assets/main.scss"],

  // 以下追記項目
  experimental: {
    inlineSSRStyles: false,
  },
});

再ビルド

Σ Total size: 4.43 MB (935 kB gzip)
✔ You can preview this build using node .output/server/index.mjs
✨  Done in 8.78s.

※ 23.4.11 時点で issue はまだ未解決状態なので暫定対応。今後の動向に注目したい。

参考にしたサイト