更新依赖项后，什么可能会导致 Nuxt.js 应用程序出现 500 错误，而控制台中没有任何错误消息？

Question

我最近更新了 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
            }
        },
    }
})

有人预感从哪里开始寻找吗？

Answer 1

这可能是 .nuxt 构建或缓存相关的问题。尝试删除

.nuxt

和

node_modules/.cache

目录并重新启动 nuxt。这有帮助吗？另请注意，您使用的是 nuxt 版本 3.0.0，而 nuxt 当前的官方版本为 3.4.3 版本。所有先前版本的更改日志似乎都没有表明有任何重大更改，只有错误修复和性能改进。所以另一个选择是简单地更新 nuxt。