Nuxt SSR DOMException：无法在“节点”上执行“appendChild”：此节点类型不支持此方法答案

【问题标题】：Nuxt SSR DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this methodNuxt SSR DOMException：无法在“节点”上执行“appendChild”：此节点类型不支持此方法
【发布时间】：2021-11-29 06:46:11
【问题描述】：

我的 nuxt SSR / express 应用程序托管在 URL 的子目录中：https://api.my-domain.com/my-app-homepage - 应用程序的主页在此处加载 /my-app-homepage。如果浏览器访问https://api.my-domain.com，他们将看到 404。

当我在https://api.my-domain.com/my-app-homepage 上加载我的应用程序时，我在控制台中看到以下错误：

Uncaught (in promise) DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at Object.appendChild (https://api.my-domain.com/my-app-homepage/_nuxt/847dc77.js:2:42101)
    at m (https://api.my-domain.com/my-app-homepage/_nuxt/847dc77.js:2:54987)
    at v (https://api.my-domain.com/my-app-homepage/_nuxt/847dc77.js:2:54618)
    at w (https://api.my-domain.com/my-app-homepage/_nuxt/847dc77.js:2:55073)
    at $ (https://api.my-domain.com/my-app-homepage/_nuxt/847dc77.js:2:58458)
    at $ (https://api.my-domain.com/my-app-homepage/_nuxt/847dc77.js:2:58393)
    at $ (https://api.my-domain.com/my-app-homepage/_nuxt/847dc77.js:2:58393)
    at f.__patch__ (https://api.my-domain.com/my-app-homepage/_nuxt/847dc77.js:2:58828)
    at f.t._update (https://api.my-domain.com/my-app-homepage/_nuxt/847dc77.js:2:35540)
    at f.r (https://api.my-domain.com/my-app-homepage/_nuxt/847dc77.js:2:66240)

在我的 nuxt 配置中，我有以下设置：

router: {
    base: process.env.NODE_ENV === 'development' ? '/my-app-homepage' : '/',
  },

 serverMiddleware: {
    '/api': '~/api',
  },


 axios: {
    // API_HOST=https://api.my-domain.com/my-app-homepage
    baseUrl: process.env.API_HOST || 'http://localhost:3000/my-app-homepage',
  },

 publicRuntimeConfig: {
    axios: {
      browserBaseURL: '/api',
    },
  },

  privateRuntimeConfig: {
    axios: {
      // API_HOST=https://api.my-domain.com/my-app-homepage
      baseURL: process.env.API_HOST || 'http://localhost:3000/my-app-homepage',
    },
  },

  build: {
    extend(config, ctx) {},
    html: {
      minify: {
        collapseWhitespace: true,
        removeComments: true,
      },
    },
    postcss: {
      // Add plugin names as key and arguments as value
      // Install them before as dependencies with npm or yarn
      plugins: {
        // Disable a plugin by passing false as value
        autoprefixer,
      },
    },
    // API_HOST=https://api.my-domain.com/my-app-homepage
    publicPath: process.env.API_HOST ? `${process.env.API_HOST}/_nuxt/` : '/_nuxt/',
    transpile: [/@nuxtjs[\\/]composition-api/, 'ag-grid-vue', 'vue-property-decorator'],
  },

srcDir: 'src/',
  babel: {
    presets(env, [preset, options]) {
      return [
        ['@nuxt/babel-preset-app', options],
        ['@babel/preset-typescript', options],
      ];
    },
  },

这是页面的vue代码：

<template>
  <div class="w-full h-full text-center">
    <span class="block text-2xl m-4">Create Todos</span>
    <form action="/my-app-homepage/api/todos" enctype="multipart/form-data" method="post">
      <div class="w-max flex m-auto flex-col">
        <input type="file" accept=".csv" class="border-2 my-2" name="todos" >
        <button class="border-2 w-min px-2 py-1 rounded-md bg-purple-500" type="submit">Submit</button>
      </div>
    </form>
  </div>
</template>

<script lang="ts">
import { defineComponent } from '@nuxtjs/composition-api';

export default defineComponent({
  name: 'Todo',
  setup() {

    return {};
  },
});
</script>

我真的被这个错误难住了。我查看了here、here 和here -- 有谁知道我为什么会看到这个错误，以及如何解决它？

我使用的是 Nuxt 2.15.7、Node 14.15.4 和 express 4.16.3

开发模式下的服务器日志：

  ╭─────────────────────────────────────────────────────────────────────╮
   │                                                                     │
   │   Nuxt @ v2.15.8                                                    │
   │                                                                     │
   │   ▸ Environment: development                                        │
   │   ▸ Rendering:   server-side                                        │
   │   ▸ Target:      server                                             │
   │                                                                     │
   │   Listening: http://localhost:3000/my-app-homepage/                   │
   │                                                                     │
   │   Tailwind Viewer: http://localhost:3000/my-app-homepage/_tailwind/   │
   │                                                                     │
   ╰─────────────────────────────────────────────────────────────────────╯

ℹ Preparing project for development                                                                                                                                                                                                                 11:22:53
ℹ Initial build may take a while                                                                                                                                                                                                                    11:22:53
ℹ Discovered Components: build/components/readme.md                                                                                                                                                                                                 11:22:53
✔ Builder initialized                                                                                                                                                                                                                               11:22:53
✔ Nuxt files generated                                                                                                                                                                                                                              11:22:53

✔ Client
  Compiled successfully in 14.05s

✔ Server
  Compiled successfully in 13.30s

ℹ Waiting for file changes                                                                                                                                                                                                                          11:23:08
ℹ Memory usage: 714 MB (RSS: 949 MB)                                                                                                                                                                                                                11:23:08
ℹ Listening on: http://localhost:3000/my-app-homepage/                                                                                                                                                                                                11:23:08
No issues found.                                                                                                                                                                                                                                    11:23:08
ℹ [Development] Redirecting from /favicon.ico to /upc-converter/favicon.ico (router.base specified)                                                                                                                                                 11:23:23
ℹ [Development] Redirecting from /favicon.ico to /upc-converter/favicon.ico (router.base specified)

这些是 chrome 控制台中的日志：

Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
vue.common.dev.js?4650:9104 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

【问题讨论】：

当您有一个不支持服务器端渲染的组件时，通常会触发此错误。解决方案是将该组件包装在<client-only></client-only> 中。我想共享错误来自生产。可以分享开发模式的日志吗？
确定，@FlorinRelea -- 我将使用问题中来自开发者的日志更新问题。
@FlorinRelea SSR 不支持上述示例中的哪个组件？这是一个非常简单的页面。
开发日志没有说太多。只有当您可以提供一个包含该错误重现的回购协议时，我才能提供帮助。
我遇到了同样的问题并使用this 解决方案修复了它。

标签： javascript nuxt.js server-side-rendering

【解决方案1】：

这里的错误对我的设置来说更加模糊和独特，因此很难在 SO 上进行中继。

问题出在生产中，我希望 URL 是这样的：https://api.my-domain.com/my-app-homepage。但是，我的 NGINX 代理将我的应用程序的 URL 设置为 https://api.my-domain.com/my-app-homepage/my-app-homepage。

服务器端渲染 (SSR) 应用程序期望其主页 URL 为 https://api.my-domain.com/my-app-homepage，这与 NGINX 将请求重写到的 URL (https://api.my-domain.com/my-app-homepage/my-app-homepage) 相矛盾。因为服务器端呈现的标记期望的 URL 与客户端实际可用的 URL 不同，所以我们遇到了 hydration 错误。

简而言之，客户端代码和服务器端代码不匹配，因此出现了水合错误。

浏览器可以通过https://api.my-domain.com/my-app-homepage 访问我的应用程序。然而，当这种情况发生时，NGINX 会将路径重写为https://api.my-domain.com/my-app-homepage/my-app-homepage——这个在浏览器上具有双倍路径的 URL 与我的 SSR 呈现的应用程序预期具有的 URL 发生冲突，即https://api.my-domain.com/my-app-homepage。

【讨论】：