更新依赖后Nuxt.js应用出现无控制台报错的500错误排查求助

最近更新了Nuxt应用的部分依赖，现在无法启动应用。尝试访问localhost:3000时收到500错误，但查看终端中的服务器控制台并未发现任何报错信息。

浏览器控制台错误信息 #

500
[vite-node] [plugin:vite:import-analysis] [VITE_ERROR] /@fs./node_modules/nuxt/dist/app/entry.mjs

import { createSSRApp, createApp, nextTick } from "vue";
import { $fetch } from "ofetch";
import { baseURL } from "#build/paths.mjs";
import { createNuxtApp, applyPlugins, normalizePlugins } from "#app";
import "#build/css";
import _plugins from "#build/plugins";
import RootComponent from "#build/root-component.mjs";
import { appRootId } from "#build/nuxt.config.mjs";
if (!globalThis.$fetch) {
  globalThis.$fetch = $fetch.create({
    baseURL: baseURL()
  });
}
let entry;
const plugins = normalizePlugins(_plugins);
if (true) {
  entry = async function createNuxtAppServer(ssrContext) {
    const vueApp = createApp(RootComponent);
    const nuxt = createNuxtApp({ vueApp, ssrContext });
    try {
      await applyPlugins(nuxt, plugins);
      await nuxt.hooks.callHook("app:created", vueApp);
    } catch (err) {
      await nuxt.callHook("app:error", err);
      nuxt.payload.error = nuxt.payload.error || err;
    }
    return vueApp;
  };
}
if (false) {
  if (true && import.meta.webpackHot) {
    import.meta.webpackHot.accept();
  }
  entry = async function initApp() {
    const isSSR = Boolean(window.__NUXT__?.serverRendered);
    const vueApp = isSSR ? createSSRApp(RootComponent) : createApp(RootComponent);
    const nuxt = createNuxtApp({ vueApp });
    try {
      await applyPlugins(nuxt, plugins);
    } catch (err) {
      await nuxt.callHook("app:error", err);
      nuxt.payload.error = nuxt.payload.error || err;
    }
    try {
      await nuxt.hooks.callHook("app:created", vueApp);
      await nuxt.hooks.callHook("app:beforeMount", vueApp);
      vueApp.mount("#" + appRootId);
      await nuxt.hooks.callHook("app:mounted", vueApp);
      await nextTick();
    } catch (err) {
      await nuxt.callHook("app:error", err);
      nuxt.payload.error = nuxt.payload.error || err;
    }
  };
  entry().catch((error) => {
    console.error("Error while mounting app:", error);
  });
}
export default (ctx) => entry(ctx);

at /@fs./node_modules/nuxt/dist/app/entry.mjs

package.json内容 #

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxtjs/i18n": "^8.0.0-beta.6",
    "@nuxtjs/pwa": "^3.3.5",
    "@nuxtjs/supabase": "^0.3.1",
    "autoprefixer": "^10.4.13",
    "nuxt": "^3.0.0",
    "postcss": "^8.4.19",
    "sass": "^1.56.1",
    "tailwindcss": "^3.2.4"
  },
  "dependencies": {
    "@formkit/addons": "^0.16.5",
    "@formkit/nuxt": "^0.16.5",
    "@formkit/tailwindcss": "^0.16.5",
    "@formkit/themes": "^0.16.5",
    "@fortawesome/fontawesome-svg-core": "^6.2.1",
    "@fortawesome/free-brands-svg-icons": "^6.2.1",
    "@fortawesome/free-solid-svg-icons": "^6.2.1",
    "@fortawesome/vue-fontawesome": "^3.0.2",
    "@hcaptcha/vue-hcaptcha": "^0.3.2",
    "@nuxtjs/algolia": "^1.5.0",
    "@nuxtjs/tailwindcss": "^6.1.3",
    "@tailwindcss/forms": "^0.5.3",
    "@vueuse/motion": "^2.0.0-beta.12",
    "i18n-iso-countries": "^7.5.0",
    "is-eu-member": "^1.0.6",
    "maska": "^2.1.7",
    "tailwind-css-variables": "^3.0.1",
    "tailwindcss-hyphens": "^0.1.0",
    "trie-search": "^1.3.6",
    "vue-number-animation": "^1.1.2",
    "vue-tailwind-datepicker": "^1.3.2",
    "vue-uuid": "^3.0.0"
  }
}

nuxt.config.ts内容 #

import postcss from './config/postcss'

export default defineNuxtConfig({
    app: {
        pageTransition: { name: 'page', mode: 'out-in' },
    },
    pwa: {
        manifest: {
            name: 'RightsPlus',
            description: "Fluggastrechte",
            theme_color: '#f97316',
            short_name: 'RightsPlus'
        }
    },
    modules: [
        '@nuxtjs/algolia',
        '@nuxtjs/i18n',
        '@formkit/nuxt',
        '@nuxtjs/supabase',
    ],
    buildModules: [
        '@nuxtjs/pwa',
    ],
    nitro: {
        compressPublicAssets: true,
    },
    formkit: {
        configFile: '~/formkit.config.ts',
    },
    css: [
        '~/assets/css/main.scss',
        '~/assets/css/transitions.css',
        '@fortawesome/fontawesome-svg-core/styles.css'
    ],
    i18n: {
        vueI18n: './i18n.config.ts' // if you are using custom path, default 
    },
    postcss,
    sourcemap: {
        server: process.env.NODE_ENV === 'development',
        client: process.env.NODE_ENV === 'development',
    },
    runtimeConfig: {
        public: {
            google: {
                key: process.env.GOOGLE_KEY,
                placeId: process.env.GOOGLE_PLACE_ID
            },
            flight: {
                aviationstack: process.env.AVIATIONSTACK_KEY,
                flighlabs: process.env.FLIGHTLABS_KEY,
                key: process.env.APP_KEY,
                appId: process.env.APP_ID
            }
        },
    }
})

排查方向 #

• 清理缓存与重建：执行rm -rf node_modules .nuxt .output package-lock.json，然后重新安装依赖npm install，再启动nuxt dev
• 修复PWA模块兼容性：@nuxtjs/pwa@3.3.5是Nuxt 2的模块，Nuxt 3需替换为@vite-pwa/nuxt，同时移除buildModules配置（Nuxt 3已统一用modules）
• 检查依赖版本冲突：Nuxt 3.0.0作为基础版本，部分beta模块（如@nuxtjs/i18n beta版）可能存在兼容性问题，尝试升级到稳定版或匹配的版本
• 查看详细日志：启动时添加环境变量NUXT_DEBUG=true nuxt dev，或查看.nuxt/logs下的日志文件，获取更具体的报错堆栈
• 逐个排查模块：临时注释nuxt.config.ts中的部分模块，逐个恢复，定位引发错误的模块
• 验证formkit配置：确认~/formkit.config.ts存在且语法正确，无缺失依赖
• 检查环境变量：确保runtimeConfig中引用的所有环境变量已正确配置，缺失变量可能导致初始化失败

内容的提问来源于stack exchange，提问作者Leon Vogler