小编Leo*_*ler的帖子

我的预感是存在一些水合不匹配，其中FontAwesomeIcon未在服务器上渲染（仅span），然后在客户端上NuxtLink渲染 的两个子节点（svg和span），提示 Nuxt 渲染span两次。

但控制台不会返回错误。

关于如何调试这个有什么想法吗？

这是 Vue 组件：

<template>
  <ul v-if="routes.length > 0" class="col-span-2 flex flex-col">
    <li v-for="(item, i) in routes" :key="item.name">
      <NuxtLink :to="item.path" target="_blank">
        <FontAwesomeIcon :icon="item.icon" class="mr-3" fixed-width />
        <span>{{ item.title }}</span>
      </NuxtLink>
    </li>
  </ul>
</template>

<script lang="ts">
export default defineComponent({
  props: {
    links: {
      type: Array,
      default: () => ["instagram", "facebook", "email"],
    },
  },
  computed: {
    routes() {
      return [
        {
          name: "instagram",
          path: "https://www.instagram.com/insta.name/", …

我最近更新了 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 …