Nuxt SSR DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method

Question

My nuxt SSR / express app is hosted on a subdirectory of a URL: https://api.my-domain.com/my-app-homepage -- the app's homepage loads here /my-app-homepage. If a browser visits https://api.my-domain.com they will see a 404.

When I load my app on https://api.my-domain.com/my-app-homepage I see the following error in console:

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)

In my nuxt config I have the following settings:

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],
      ];
    },
  },

Here is the page's vue code:

<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>

I am really stumped with this error. I have looked here, here and here -- does anyone know why I am seeing this error, and how I can fix it?

I am using Nuxt 2.15.7, Node 14.15.4, and express 4.16.3

Server Logs in Dev mode:

  ╭─────────────────────────────────────────────────────────────────────╮
   │                                                                     │
   │   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)

And these are the logs in chrome console:

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

Answer 1

The error here was more obscure and unique to my setup so it was difficult to relay on SO.

The problem was in production I was expecting the URL to be like this: https://api.my-domain.com/my-app-homepage. However, my NGINX proxy made the URL to my app this https://api.my-domain.com/my-app-homepage/my-app-homepage.

The server side rendered (SSR) app was expecting its home URL to be https://api.my-domain.com/my-app-homepage, which contradicts the URL (https://api.my-domain.com/my-app-homepage/my-app-homepage) that NGINX was rewriting requests to. Because the server side rendered markup was expecting a different URL than what was actually available to the client, we had a hydration error.

In short, The client side code and the server side code did not match and as a result, we had a hydration error.

A browser could visit my app at https://api.my-domain.com/my-app-homepage. However, when this happened, NGINX would rewrite the path to https://api.my-domain.com/my-app-homepage/my-app-homepage -- this URL with the doubled up path on the browser clashed with the URL that my SSR rendered app expected to have, which was https://api.my-domain.com/my-app-homepage.