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

[willin]

Version

2.6

Reproduction link

http://demo.xibangtech.com/

Steps to reproduce

Source: https://github.com/xibang/xibang.tech

Localhost dev is ok, but when nuxt generate and deploy to server, it occurs error. Besides, all links cannot click then.

What is expected ?

generate and work.

What is actually happening?

Error: [nuxt] Error while mounting app: HierarchyRequestError: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at 624151740479ce035ad7.js:1

more

build - ssr - set to false, then localhost develop:

Nuxt.js: Loading app...

auto refresh and refresh ... endless

_{This bug report is available on Nuxt community (#c9262)}

[manniL]

This is mostly related to a hydration error in dev mode. See #1552

[willin]

... it's not i guess. @manniL

i tried

npx create-nuxt-app demo-framework

and use vuetify, can run successfully.

then. i add config build - ssr - to false then auto refresh and refresh ... endless

perhaps it's a bug about ssr and generate...

[yedincisenol]

I have same issue too

[iamsanteri]

I have also run into same issues

[gregtap]

Same issue on a very simple page, I will see if I can pinpoint the issue.

[mrKorg]

I have the same problem.
I left ony one tag <div></div> in my template, but it is didn't help.
I can see this error ony for pages by route like post/:slug

[pimlie]

If someone could create a working, minimal reproduction on Codesandbox which clearly demonstrates the issue that would be appreciated.

[willin]

@pimlie previous commit can show, like:
https://github.com/xibang/xibang.tech/tree/9552ddd46bafa891ac66fbf434bab277ef59f57d

[pimlie]

@willin but thats not minimal, that seems to be a full project with custom components etc. Also its not on codesandbox so I have to clone it myself, install deps and then try to understand what all those components do to see if they have an impact or not. I am just too lazy for that because previous issues have shown that 9 out of 10 times its a user issue and not a nuxt issue.

That said I am willing to believe that this might be a Nuxt issue because multiple users reported it, but still please make it as easy as possible for us so we dont have to spent 5-10 minutes on every reported issue to setup the reproduction environment. Help us to help you, thanks :bowtie:

[willin]

https://github.com/wshow/nuxt-ssr-bug-demo

just: yarn generate

yarn run v1.16.0
$ nuxt generate
ℹ Production build                                                    17:55:18
✔ Builder initialized                                                 17:55:18
✔ Nuxt files generated                                                17:55:18

✔ Client
  Compiled successfully in 7.26s


Hash: 78e77b79e5f9de33748d
Version: webpack 4.34.0
Time: 7263ms
Built at: 2019/06/14 下午5:55:26
                         Asset      Size  Chunks                    Chunk Names
../server/client.manifest.json    17 KiB          [emitted]
       0b36c3f9cd80a5235261.js  3.56 KiB       2  [emitted]         pages/index
       31be87d2021ce326b6aa.js   164 KiB       1  [emitted]         commons.app
       363363cb27916f91c2b0.js  2.26 KiB       3  [emitted]         runtime
       4acfdfa1fede793a7346.js  32.4 KiB       0  [emitted]         app
       7ded24c3df1047a0e89f.js   424 KiB       4  [emitted]  [big]  vendors.app
                      LICENSES   1.8 KiB          [emitted]
 + 1 hidden asset
Entrypoint app = 363363cb27916f91c2b0.js 31be87d2021ce326b6aa.js 7ded24c3df1047a0e89f.js 4acfdfa1fede793a7346.js

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  7ded24c3df1047a0e89f.js (424 KiB)
ℹ Generating pages                                                    17:55:26

 ERROR   /                                                            17:55:26

Error: Renderer is loaded but not all resources are unavailable! Please check /Users/willin/Desktop/nuxt-ssr-demo/.nuxt/dist/server existence.
    at VueRenderer.renderRoute (/Users/willin/Desktop/nuxt-ssr-demo/node_modules/@nuxt/vue-renderer/dist/vue-renderer.js:2931:19)
    at Server.renderRoute (/Users/willin/Desktop/nuxt-ssr-demo/node_modules/@nuxt/server/dist/server.js:736:38)
    at Generator.generateRoute (/Users/willin/Desktop/nuxt-ssr-demo/node_modules/@nuxt/generator/dist/generator.js:222:42)
    at /Users/willin/Desktop/nuxt-ssr-demo/node_modules/@nuxt/generator/dist/generator.js:120:24
    at async Promise.all (index 0)
    at async Generator.generateRoutes (/Users/willin/Desktop/nuxt-ssr-demo/node_modules/@nuxt/generator/dist/generator.js:115:7)
    at async Generator.generate (/Users/willin/Desktop/nuxt-ssr-demo/node_modules/@nuxt/generator/dist/generator.js:48:20)
    at async Object.run (/Users/willin/Desktop/nuxt-ssr-demo/node_modules/@nuxt/cli/dist/cli-generate.js:104:24)
    at async NuxtCommand.run (/Users/willin/Desktop/nuxt-ssr-demo/node_modules/@nuxt/cli/dist/cli-chunk.js:2614:7)


 FATAL  Renderer is loaded but not all resources are unavailable! Please check /Users/willin/Desktop/nuxt-ssr-demo/.nuxt/dist/server existence.

  at VueRenderer.renderRoute (node_modules/@nuxt/vue-renderer/dist/vue-renderer.js:2931:19)
  at Server.renderRoute (node_modules/@nuxt/server/dist/server.js:736:38)
  at Generator.afterGenerate (node_modules/@nuxt/generator/dist/generator.js:168:43)
  at async Generator.generate (node_modules/@nuxt/generator/dist/generator.js:50:5)
  at async Object.run (node_modules/@nuxt/cli/dist/cli-generate.js:104:24)
  at async NuxtCommand.run (node_modules/@nuxt/cli/dist/cli-chunk.js:2614:7)


   ╭──────────────────────────────────────────────────────────────────────╮
   │                                                                      │
   │   ✖ Nuxt Fatal Error                                                 │
   │                                                                      │
   │   Error: Renderer is loaded but not all resources are unavailable!   │
   │   Please check                                                       │
   │   /Users/willin/Desktop/nuxt-ssr-demo/.nuxt/dist/server existence.   │
   │                                                                      │
   ╰──────────────────────────────────────────────────────────────────────╯

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[pimlie]

Thank you very much for the minimal repro.

What is your use-case for setting ssr: false but not using mode: spa? Its recommended to just use either mode: universal or mode: spa. You can do this with a cli option as well, run yarn generate -s to generate your site in spa mode or just yarn generate to generate in universal mode. See yarn nuxt --help for a list of available options

[willin]

why spa...

my site may be more than one page.

[pimlie]

why ssr false?

Did you try and see what happens?

[willin]

'coz to generate static site...

like a static blog. all routes all posts will be handled before generation.

[pimlie]

Just remove ssr: false from your config and run yarn generate. That will generate html files and resources for all the static routes and the dynamic routes you have provide with generate.routes in your config.

[willin]

it's a bug and just fix it. why should i use tricks?

[pimlie]

@willin Not sure if its a matter of your English skills, but saying _just fix it_ is not a nice thing to say. Please have a look at Nuxt's Code of Conduct

I still dont understand what you are trying to do, normally you shouldnt have to manually change the ssr property so the only issue I see is a documentation thing to better clarify that. Again, please remove ssr: false from your config and then run nuxt generate as with what you have explained up to now that should do exactly what you need. Otherwise explain in full detail what you are trying to accomplish.

[itzaks]

I'm also having the same issue, shows up from time to time when deploying on netlify with nuxt generate. Don't really know what's causing it... I'm trying to find out.

[JakubKoralewski]

@itzaks In my case I have diagnosed the problem now, but don't know how to fix it. I've narrowed it down to the Netlify Forms. The problem only happens on the branch I have them on. What happens is Netlify adds a hidden input , but the problem is: they are closing their input!:

<input type='hidden' name='form-name' value='contact-form' />

It's not valid HTML!

In my case, Chrome tried to somehow guess what was happening and in its confusion it nested an input with a label inside that hidden input, but again its not valid HTML as input tags are void and should not have anything inside them! It's so frustrating when everything is fine on your development machine, but something unexpected happens :/

[itzaks]

@JakubKoralewski Thanks for your reply, in my case it had to do with some v-if conditionals that I had to remove. Really hard to debug, I had to place breakpoints and step through the code a lot of times. This happend 50% of my deploys so it did not always break. It seems to be stable now after removing a couple of the v-if's on the component that wouldn't render. I think this is a nuxt problem rather than a client issue.

Edit: Still experiencing the issue.

[pimlie]

@itzaks Please provide a minimal reproduction if you are able to

[itzaks]

@itzaks Please provide a minimal reproduction if you are able to

I'm afraid I don't have the time to do that right now.

I've tracked it down the error (Failed to execute 'appendChild' on 'Node') to occur when the first children of a page (no matter what children) is to be appended. Then the root element of the page doesn't exist, being of type "comment" with no, obviously, innerHtml. The root element for the page does not contain any conditional or anything except a static id and classname.

[studnitz]

Changing mode: 'universal' to mode: 'spa' fixed this for me, but this should be somehow mentioned in the docs, that using generate could lead to those problems.

[pimlie]

I have seen this error once after generating a project which didnt have a index page. There was still a index page being generated and linked to a greedy page component which didnt support the / route.

@studnitz There still isnt any working (minimal) reproduction for this issue, could you maybe share one?

[studnitz]

Suppose you have a index.vue like this and also use @nuxtjs/auth:

<template>
<div>
  <div v-if="loggedIn">
     ....
  </div>
  <nuxt-link v-else to="/login">
     Login
  </nuxt-link>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  auth: 'false',
  computed: {
    ...mapState('auth', ['loggedIn']),
  },
}
</script>

Prerequiste is generating the app via nuxt generate and deploying it (in our case netlify).

With mode: 'universal' set in nuxt.config.js:
If you are logged in and call the '/' route manually, you won't see the div and instead the Login link, and also get the appendChild error in console.

If you navigate to the '/' route from inside the app, this error also doesn't show up. It's just on a full page refresh.

With mode: 'client' you don't get this error and you see the loggedIn div.

[galvez]

@studnitz that error happens if you fail to list / as a generate route.

[pimlie]

@studnitz Thanks, unfortunately I cant replicate the behaviour with a simple v-if.

Please create a _working_ and _minimal_ reproduction on codesandbox that only shows this issue. With minimal I mean a complete nuxt project but preferable without using any modules to e.g. exclude the issue is caused by the auth module.

[luvletterldl]

Hey, guys! I have the same issue in my project. I try @click= () => { location.href = '/xxx/xxx/xxx/' } instead of <nuxt-link>when problem occured to the page. Meanwhile, I closed ths minify in the nuxt.config.js. However, I found it doesn't work. So I try v-show instead of v-if in this page, then everything is OK~, I guess v-if is dangerous in nuxt.

[galvez]

@luvletterldl v-if is not dangerous. What you're probably doing is forcing a page update without having it properly hydrated. What mode are you running Nuxt in? SPA? Universal? Are you building your app with nuxt generate?

[Teranode]

This would sometimes happen when im using asyncData with a lazy loaded component. If the component is not lazy loaded then it starts working.

[luvletterldl]

@galvez npm run generate Universal

[luvletterldl]

@galvez v-if judged by sessionStorage.getItem('xxx') during beforeMounted, and have <nuxt-link> in the .vue file. And dev is ok, `generate' doesn't work.

[galvez]

@luvletterldl you see, nuxt generate relies on server-side rendering to generate the pages. There is no access to sessionStorage on the server, which is why your code fails. Use a computed property that returns sessionStorage.getItem(...) on the client, but some placeholder value on the server (or a store-hydrated value on the server).

[galvez]

So instead of:

sessionStorage.getItem('xxx')

Use:

if (process.client) {
  return sessionStorage.getItem('xxx')
} else {
  return where-to-get-the-same-value-or-a-placeholder-on-the-server
}

[SirAuron]

Hi all!

Just wanted to say that I've encountered this same issue.

I'll describe how I found the error and how I solved it:

1. Our website is statically deployed on an AWS bucket. The issue occurred only after using the generate command. If a user opened the website and got to be handled by Nuxt SPA fallback, every component worked just fine.
2. However, since generate creates a folder named like the url and places an index.html file inside it, after a user clicked the browser refresh button on the page (for example) /en/home, AWS Cloudfront made a redirect to the address /en/home/, throwing the error.
3. After a very long investigation, I luckily noticed that the button used to change the locale was not rendered on the /en/home/ page while it was correctly displayed on the /en/home.
4. Opening its relative file inside the dist folder created by generate, I found out that the two buttons were not rendered by generate.
5. Since I've read some of the comments here about people solving the issue by using a v-show instead, I tried to remove the component, rebuilt the website and the page worked. The strange thing is that the previous version of the website used the same exact piece of code for the buttons and it worked.
6. A precious hint came from the fact that for generating meta tags for socials I was accessing the property this.$nuxt.$route.params.blogEntry (on a page called _blogEntry.vue), and noticed that the returned value during the generate process was set once and then never changed. I fixed the _blogEntry.vue problem by saving the article url inside the asyncData returned object.
7. Applying the same logic in the home page, I changed the condition on the button elements from v-if="$nuxt.$route.path.indexOf('blog') < 0" to v-if="$route.path.indexOf('blog') < 0" and, after executing another round of generate, the page worked perfectly.

Unfortunately I cannot provide a reproduction due to a lack of time right now, so sorry 'bout that.

Anyway I think the problem is that when generateing the static app, $nuxt values are not correctly updated for some reason. I do not even know if this kind of behavior is wanted and well known or not, even though I doubt it.

Hope this can help somebody.

[luvletterldl]

@SirAuron 👍👍👍👍👍👍

[rstormsf]

Here is how I fixed it:

yarn add gulp gulp-html-minifier

then create gulpfile.js

const { src, dest } = require('gulp')
const htmlmin = require('gulp-html-minifier')

function minify() {
  return src('./dist/**/*.html')
    .pipe(htmlmin({ removeComments: true, collapseWhitespace: true }))
    .pipe(dest('./dist'))
}

exports.default = minify

in package.json for generate script do this: nuxt generate && gulp

[SayedShahidi]

Having the same issue.

[bright-sea]

Having the same issue.

https://webpivottable.com

When refresh this homepage, this issue at there. But when we access subdirectory first, like:

https://webpivottable.com/doc , then everything is fine.

[pimlie]

Please dont post comments that you have the same issue without adding a reproduction. If you have the same issue, just give the issue a thumbs-up or click the _subscribe_ to notifications button. Only post a comment if you have meaningful new information which helps us to understand the issue better.

This issue is still missing a proper reproduction, without it we wont be able to look at this issue.

[iamsanteri]

Thanks @rstormsf, I can confirm that this fixed the issue for me. No longer getting this error after generating and deploying to production. Thumbs up!

If someone indeed can support by providing a repro build, I hope that it can be fixed within Nuxt itself.

[clarkdo]

Hi, can anyone please provide me a reproducible repo so that I can look into this issue?

An error message without any detail information is very hard to be located.

[michaelBenin]

Wanted to chime is as I just encountered this but figured it out pretty quickly.

To reproduce the issue - server render two anchors nested within each other.

Example using buefy:

<template>
  <b-navbar>
    <template slot="brand">
      <b-navbar-item>
        <nuxt-link to="/">
        <img
          src="https://pbs.twimg.com/profile_images/506791553491144705/nfWqtVpW_normal.jpeg"
          alt="Picture of Michael Benin"
        />
        </nuxt-link>
      </b-navbar-item>
    </template>
    <template slot="start">
      <b-navbar-item>
        <nuxt-link to="/">Home</nuxt-link>
      </b-navbar-item>
      <b-navbar-item>
        <nuxt-link to="/about">About</nuxt-link>
      </b-navbar-item>
    </template>

    <template slot="end">
      <b-navbar-item tag="div">
        <div class="buttons">
          <a class="button is-primary">
            <strong>Sign up</strong>
          </a>
          <a class="button is-light">
            Log in
          </a>
        </div>
      </b-navbar-item>
    </template>
  </b-navbar>
</template>

This generated server rendered dom with two anchors nested. To fix it I had to change the tag name on the item to div.

Basically - people who have malformed html are reporting this error. Having written a custom SSR site in react years ago allowed me to understand the nuances in server rendering.

I hope this helps. Feel free to reach out to pair on this repro.

[rstormsf]

@michaelBenin
I don't understand where exactly I malformed my html
https://github.com/peppersec/erc20faucet/tree/master/front

@clarkdo
example of my website:
https://github.com/peppersec/erc20faucet/tree/master/front

[thrazu]

Hi! Take a look at this:

• when I'm not logged in everything works fine.
• when I login, it appears the error DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method. most of the time.

I have on my server (1) the static generated site at port :80, and (2) the same site deployed (build / start) which runs at port :8000. If I'm not logged in everything works fine (both sides).
Else, if I do login (from one side or another, doesn't matter), I'm getting the error above, but only on the static generated site (port :80). If I do logout at port :8000, everything works fine again. No error, no stress. ( sorry for my bad english :) )

More: if I do login from static generated without refreshing the page, it works good. Only if I refresh the page it comes the error.

[bengineer19]

@rstormsf Thank you so much, fixed it for me. Why does Gulp fix it??

[mckrava]

I'm not sure that my case is very frequent but maybe this info will be useful for somebody - I've lost 3 days of debug on production instance and exactly in Facebook browser. I user this service for remote debug of js console - remotejs.com/ (it's not adv, just other tools don't work).
So I had next error:

Error: [nuxt] Error while mounting app: HierarchyRequestError: Failed to execute ‘appendChild’ on ‘Node’: This node type does not support this method.

It happened not on every page load, ~ 7 times from 10 and only in one page - single article page (it's news blog).
And I've found a reason - it was Google Auto Ads. Auto Ads tries to insert html to the DOM but not at correct time point. So I've switched off Auto Ads feature in Google Ads console and it helped.

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[rstormsf]

@bengineer19 basically nuxt generates some weird tags on html, so I just post-process the html to get rid of it.

[iiAku]

Edit: My bad, I thought everything was fixed but it's not, I keep getting the message pretty randomly after some force refresh. Still keeping my comment if it does help some people.

Hello,

I do not know if you find a proper solution atm for this, but since I've spent the past 2 days on this I would like to share a kind of solution I come up with. So for my part it was coming from self-closing tags, since I was using the font-awesome-icons with a self closing tag.

You can have a look at this:

• https://github.com/FortAwesome/vue-fontawesome#quick-warning-about-self-closing-tags
• https://github.com/vuejs/vue/issues/1036

What I've done so far is to turn almost all of my self closing tags component or html tags into no self closing tags out of the one which are automatically turned with closing tags from my formaters such as (br, input, hr) and it resolve the things.
It seems that the nuxt.js generate system does not handle properly or as expected the fact that you may wrongly use self-closing-tags. I don't exactly know how things are wired internally but the good thing would be to dynamically turn any self-closing tags into no self-closing tags (throught webpack?). Also just a tip for Nuxt.js community, that would be great if we can communicate about this issue or making sure this is happening in dev environment. I don't know why but I never had this issue on development side, I did get it while trying to nuxt build & nuxt start locally but after some changes it did not longer happen locally while I was still getting it when being deployed into production. A little bit of pain for debugging this. Out of this, thanks you so much Nuxt.js cmty for your work and amazing framework :+1: .

[BigFly3]

In my case, html formatting (line feed) was a problem.

   hooks: {
     generate: {
       page (generator) {
         generator.html = pretty (generator.html, {ocd: true})
           return generator
       }
     }
   },

This happens even if you try to insert a new line in the generated HTML.

[iiAku]

Hello,
That time seems to be the good one.
Quick note about @BigFly3 's answer:
it also would have been great if you had given more details about how to achieve this. I'm happy with this if you managed to make it work for that way. However just to clarify and give a little bit more pieces of advices for the otherpeople who ran into the same issue and want to give it a try to your explained solution. You are using the internal hooks mechanism from Nuxt.js where documentation is available there: https://nuxtjs.org/api/internals-generator#hooks
This need to be declared into your nuxt.config.js file as a new property in the exported object. Also you are using pretty which is not an internal tool and available from there: https://www.npmjs.com/package/pretty
That means obviously you'll have to add it as dependency and import it earlier for using it through the nuxt.config.js.

After going forward on my project and trying to fix this, it leads that my issue was linked to a conditional rendering see this: https://vuejs.org/v2/guide/conditional.html
That's perhaps a beginner issue but I just realised while troubleshooting (correct me if I'm wrong) that you can't have nested conditional rendering with vue.js. You cannot nest multiple v-if or mixed v-if/v-show. I did have a v-if nested into another v-if and it was basically what was doing the mismatch between the expected DOM node and the rendered one. I also managed to get the error message and a more explicit one on dev side, so thanks Nuxt.js community. Actually what I figured it out seems narrowly linked with upper solution saying to turn v-if statement into v-show. However I wanted to understand the underlying reason regarding this. In the end this is with what I ended up for that particular case. However it does not means you have to use v-show instead of v-if at all time. As explained here: https://vuejs.org/v2/guide/conditional.html#v-if-vs-v-show
v-show is about dom element visibility where v-if completely remove the block/functionalities from the DOM, so it remains still useful on the vast majority of case regarding conditional rendering.

As some pieces of advice for those who are facing that issue, I'll recommend to spend time on the following points:

1. Identifying which part of your app is generating that issue, in order to reduce the scope of troubleshooting
2. Making sure you are not using any kind of nested v-if/v-show
3. Making sure you are using valid HTML template into your vue components (formatting/linting can help)

While going through this I believe you should not face any kind of DOMException error in dev/prod Nuxt.js app.

Enjoy.

[alisonmoura]

Hi there! I had the same issue. In my case, I solve it removing a v-if in the default.vue (the first file loaded in the SPA).

[iiAku]

Hello,

Repro available here:
https://github.com/iiAku/repro-v-if-bug

nb: I understand that my code could be smarter or written another way, but this is basically a piece of code that was not working and I did perhaps misunderstood how vue conditional rendering is working.

ping @pimlie @Atinux

Note for @alisonmoura and others, as suggested by @pimlie , please comment if you have extra details for the issue or repro link.

Thanks for your time.

[emdahlstrom]

Not using computed properties with nested v-if solved the problem for me.

[dario30186]

Hi,
I solved this issue with the following configuration in nuxt.config.js:

module.exports = { build: { html: { minify: { collapseWhitespace: true } },

This avoids to add gulp to project dependencies

[harmnot]

hey guys , I have same problem and find out for days about this, my app can't read the .js files after build
what @dario30186 said is correct like this answer (https://github.com/nuxt/nuxt.js/issues/1552#issuecomment-341729165) as well
cheeeeeerrs 👯‍♂

[dario30186]

this answer (#1552 (comment)) as well

The solution in that thread is deprecated and will be removed in the next nuxt version, you should use my solution if you don’t want have any problem of compatibility ;)

[harmnot]

yep I was saw your solution and it was works when I deploy it to s3, but when I tried to GitLab Pages, it still doesnt work :)
but so far is good because it was not really work at all when I deploy to s3 , but after saw your solution it was works

GitLab Pages and surge still have issue to deploy the dist folder,

[WelaurS]

Faced this issue too. Google Analytics broke layout while switching between pages. It was decided by adding script to tag

[dirkvanbergen]

@itzaks In my case I have diagnosed the problem now, but don't know how to fix it. I've narrowed it down to the Netlify Forms. The problem only happens on the branch I have them on. What happens is Netlify adds a hidden input , but the problem is: they are closing their input!:

<input type='hidden' name='form-name' value='contact-form' />

It's not valid HTML!

In my case, Chrome tried to somehow guess what was happening and in its confusion it nested an input with a label inside that hidden input, but again its not valid HTML as input tags are void and should not have anything inside them! It's so frustrating when everything is fine on your development machine, but something unexpected happens :/

Thanks for this tip. I manually added the generated input to my template so Netlify doesn't have to and it works like a charm

[Splinterjke]

In my case the same error was occured when a computed property returning vuetify breakpoint has been used in v-if directive. So the solution was just to add a boolean data object, set it to true in onMounted hook and to use it as breakpoints mount indicator exactly like here: 3436# comment. There is also a solution based on mixins (just scroll down a bit).

[iuliansafta]

Hi,
I had the same problem with one of my projects. The data returned from the server is processed in a computed method and then displayed with a v-for. It seems that even with v-for it doesn't work very well.
So the solution was to remove computed method and process the data into asyncData.
Hope that could help someone.

Thanks @emdahlstrom for the tip!

[zhanfu93]

Hi,
I had the same problem with my project.
I used 'client-only' tag to relove the problem

[Alex1990]

I have the same problem. And the reason is the build.hardSource is true when building in jenkins.

[LiuFang830]

Here is how I fixed it:

yarn add gulp gulp-html-minifier

then create gulpfile.js

const { src, dest } = require('gulp')
const htmlmin = require('gulp-html-minifier')

function minify() {
  return src('./dist/**/*.html')
    .pipe(htmlmin({ removeComments: true, collapseWhitespace: true }))
    .pipe(dest('./dist'))
}

exports.default = minify

in package.json for generate script do this: nuxt generate && gulp

Thanks for this. I have tried everything, only your method works!

[1isten]

Here is how I fixed it:

yarn add gulp gulp-html-minifier

then create gulpfile.js

const { src, dest } = require('gulp')
const htmlmin = require('gulp-html-minifier')

function minify() {
  return src('./dist/**/*.html')
    .pipe(htmlmin({ removeComments: true, collapseWhitespace: true }))
    .pipe(dest('./dist'))
}

exports.default = minify

in package.json for generate script do this: nuxt generate && gulp

Thanks for this. I have tried everything, only your method works!

This can be done in nuxt.config.js, without gulp:

module.exports = {
  build: {
    html: {
      minify: {
        collapseWhitespace: true,  // as @dario30186 mentioned
        removeComments: true, // 👈 add this line
      },
    },
  },
};

[mmgmail]

I had the same issue, my component didn't load
I use next solution:

    <template lang="html">
       <div v-if="mounted">
            ......
           <my-component />
       </div>
    </template>

     <script>
        export default {
            data() {
               mounted: false
             }
        },
       mounted() {
         setTimeout(() => {
            this.mounted = true;
       }, 10)
     }
    </script>

[nekdolan]

I got this error when I tried to do v-if="$vuetify.breakpoint.smAndDown" in Universal mode. Makes sense, but a more informative error might be a good idea, if at all possible.

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

[chansnotes]

Does anyone have issue when you try to use v-if=this.$auth.user for conditional rendering?

Almost all of the time, the app is showing DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.

However, if you move pages with a certain way, the app is working properly as intended...

Any followups?

[ryanthanhtien]

Here is how I fixed it:

yarn add gulp gulp-html-minifier

then create gulpfile.js

const { src, dest } = require('gulp')
const htmlmin = require('gulp-html-minifier')

function minify() {
  return src('./dist/**/*.html')
    .pipe(htmlmin({ removeComments: true, collapseWhitespace: true }))
    .pipe(dest('./dist'))
}

exports.default = minify

in package.json for generate script do this: nuxt generate && gulp

Thanks for this. I have tried everything, only your method works!

This can be done in nuxt.config.js, without gulp:

module.exports = {
  build: {
    html: {
      minify: {
        collapseWhitespace: true,  // as @dario30186 mentioned
        removeComments: true, // 👈 add this line
      },
    },
  },
};

You saved my life

[szvest]

After a couple tentatives trying to implement some of the recommendations and solutions here, I ended up with surrounding the <div> in the layout(s) with <client-only>. Note that I am using mode: "universal".

At the dev environment I was also getting a hydration mismatch. I fixed it with <client-only> as well. I believe this issue is related to that of the hydration and the mismatch.

That makes sense because of the nested <div>s. I don't understand however how html minification and comments' removals fixed it.

[micksi]

@szvest be aware that wrapping the whole site in client-only will fix the error but also prevent the server som doing the actual rendering of the html and you won't have the benefits that nuxt provides. I have found that this error usually comes down to a state error where the server has one state and the client another. Be sure to check that user specific dom is only loaded clientside with client-only and everything shared should be generated by the server.

[chansnotes]

Well... I was a little bit stupid.
I haven't tried wrapping the whole site with <client-only> tag, but simply not using <body> tag inside of each .vue pages.

I guess if you use <body> tag in pages, it would create nested <body> tags. And I believe this was causing the hydration and mismatch error...

I'm not sure why this happened... does anyone know the reason for this?

[kovaletsyurii]

In my case, the problem is in serverPrefetch, I returned the promise with rejected error inside. I am just add the error handling in action promise.

[cyrrill]

In case this helps save someone some grief, I just dealt with this issue for hours. Tried absolutely everything:

deleting node_modules and reinstalling, deleting .nuxt folder, switched dev/prod mode, clearing cookies and localstore, refreshing....

In the end it turned out to be aggressive browser cache. The only thing that worked was hard reloading the browser:

Worth a try if you've done everything! it worked for me :)

[tillsanders]

In my case, I was using a noscript tag to provide some fallbacks for no-js users. Somehow, this caused the issue described here. The solution was to wrap the tag in a client-only tag, like this:

<client-only>
  <noscript>
    Fallback content here.
  </noscript>
</client-only>

This issue seems to arise under quite different circumstances. Would be nice to discover the underlying issue 🙈

[jsbroks]

@cyrrill Thank you, you saved me hours!

[philipgunther]

Does anyone have issue when you try to use v-if=this.$auth.user for conditional rendering?

Almost all of the time, the app is showing DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.

However, if you move pages with a certain way, the app is working properly as intended...

Any followups?

This is my problem as well.

How did you move your pages? I've moved the v-if="$auth.loggedIn" part of my layout into a component, but no luck. The error still exists.

The minify recommendation from above did not change anything for me.

[philipgunther]

I solved my problem: If I use v-show instead of v-if, the issue disappears.

<div v-if="$auth.loggedIn"> --> <div v-show="$auth.loggedIn">

See https://github.com/nuxt/nuxt.js/issues/1552#issuecomment-356584010

[Hyperblaster]

@iam-pac-man Same for me, This occurs on every second refresh or so:
DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.

Have tried all kinds of things, i can't even replicate the error consistently, sometimes it works sometimes it doesn't

[philipgunther]

@iam-pac-man Same for me, This occurs on every second refresh or so:
DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.

Have tried all kinds of things, i can't even replicate the error consistently, sometimes it works sometimes it doesn't

Have you tried my solution with v-show? That was the reason for me.

[cyrrill]

Same for me, This occurs on every second refresh or so

@Hyperblaster are you by chance using the Nuxt PWA module?

I've noticed some inconsistent behavior upon refresh, and I suspect it could be related to this module.

[centerorbit]

As @nekdolan and @Splinterjke pointed out, using v-if with a $vuetify.breakpoint breaks with SSR. Since v-if removes the DOM element (making the mismatch happen between client and server), my solution was to simply switch to using a v-show since the DOM element remains, but is hidden.

Example:

<v-app-bar-nav-icon
  v-show="$vuetify.breakpoint.smAndDown"
  @click.stop="input()"
/>

[1isten]

As @nekdolan and @Splinterjke pointed out, using v-if with a $vuetify.breakpoint breaks with SSR. Since v-if removes the DOM element (making the mismatch happen between client and server), my solution was to simply switch to using a v-show since the DOM element remains, but is hidden.

Example:

<v-app-bar-nav-icon
  v-show="$vuetify.breakpoint.smAndDown"
  @click.stop="input()"
/>

I think that's because $vuetify.breakpoint relies on BOM. The viewport width is not available on the server side. In such case, you can also use <client-only> to wrap the element.