Nuxt Static Site - Cannot load components DOMException Error

[alidcast]

For some reason a few of the pages are getting this error:

Cannot load components DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
at Object.Se [as appendChild]

It's a static documentation site. The pages contain components that are used as demos, but I'm not doing anything out of the ordinary.

Here's an example template:

<div class="coin-flip">
  <p> Heads or Tails? {{ this.answer }} </p>
  <button @click="flipCoin.run()">
    {{ flipCoin.isActive ? 'May the odds be with you...' : 'Flip coin'}}
  </button>
</div>

The error does not show up in dev server, it only shows up in static, hosted version of site.

I saw a related issue (#468), but I'm hosting the site via gh-pages and I already tried upgrading my dependencies, so not sure what else is could be causing the error.

_{This question is available on Nuxt.js community (#c455)}

[jaslocum]

I don't have the reason, but I get a similar error when I use 'nuxt generate' vs 'npm run generate'.

My generated nuxt.js app works just fine on my nginx and apache2 servers when I build using 'npm run generate', but I get the following error when I use 'nuxt generate' directly:

[nuxt.js] Cannot load components DOMException [HierarchyRequestError: "Node cannot
be inserted at the specified point in the hierarchy"

This seems odd because npm is calling 'nuxt generate' anyway because the default package.json is configured as:

package.json: 
...
"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate",
  "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
  "precommit": "npm run lint"
},
...

[Atinux]

It's very important to call nuxt generate from the local installation (never install nuxt globally).

@alidcastano do you have a project where I can reproduce this issue, without it, it's pretty hard to find the error without.

[sebastianmacias]

I'm having the same problem but only on refresh.

[sebastianmacias]

@Atinux I created a repo with steps to reproduce:
https://github.com/sebastianmacias/nuxt-dom-exception

[sebastianmacias]

Is there an update on this?

"nuxt generate" is the reason I started migrating major projects to nuxt. In my opinion being able to quickly and easily generate static apps that can be hosted on CDNs, load crazy fast and consume APIs is what sets nuxt apart.

I don't know where making sure static generation works properly stands in the priority list for the devs but it's a huge deal for me and many devs I have introduced to nuxt.

[Atinux]

Hi @sebastianmacias

Sorry, I was very busy the last 2 weeks (I moved to Paris).

I will take a look with @alexchopin on this issue since the generate feature is one major feature of Nuxt.js.

[Atinux]

@sebastianmacias, @jaslocum there is a misunderstanding about how using nuxt generate

Your Nginx config in you reproduction is wrong, don't serve the dist/index.html for every page, this is not a "normal" vue.js application, every route is saved to an HTML file so there is no 404.

This is what's causing the error, you try to access the /about page for example, but you serve dist/index.html instead of dist/about/index.html

[alidcast]

@Atinux

Sorry, I've been incredibly busy and didn't have a chance to get back to this till now. I'm still facing this error; if you could take a look at it, I'd appreciate it.

Here's the repo: https://github.com/encyjs/encyjs.org
Here's an example that causes the error: http://encyjs.alidcastano.com/coin-flip/
Here's an example that doesn't cause the error: http://encyjs.alidcastano.com/coin-flip/

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.