Component disapearing when deployed to Github

smth
0
smth
commented 2 years ago

Not sure if this is a Nuxt issue or not, but does anyone have any idea why an element might disappear from the dom once JS is loaded. I can't reproduce this locally, is only happening once deployed to GitHub Pages. See the logo (top-left) here.

bug
0
pi0
29.8k
pi0
commented 2 years ago

Hi @smth. Please check console in dev mode for Vue warns. This happens when SSR response is different from browser rendered result and on production may cause this problem.

0
smth
0
smth
commented 2 years ago

Hi @pi0 I'm not seeing any warnings. Just the message stating that You are running Vue in development mode.

0
Atinux
24.6k
Atinux
commented 2 years ago

@smth do you have a reproduction repository for us to try to reproduce this behaviour?

0
smth
0
smth
commented 2 years ago

@Atinux the repository is here.

0
alexchopin
4.2k
alexchopin
commented 2 years ago

@smth Have you tried to replace the <a> by <div> to see if it can be due to the hydrate?

1
smth
0
smth
commented 2 years ago

Hi @alexchopin I just tried that, made no difference.

0
pi0
29.8k
pi0
commented 2 years ago

@smth If using 1.x version of nuxt, try temporary setting env: { NODE_ENV: 'dev' } in nuxt.config.js it will give you better hints for production errors

0
smth
0
smth
commented 2 years ago

Looks like I'm using v0.9.9. Do you suggest updating?

0
smth
0
smth
commented 2 years ago

@pi0 I have now tried running the latest version and adding your suggested code. If I add that within module.exports I get "[SyntaxError: Unexpected identifier]". Outside of module.exports there is no error, but nothing new in the console either.

Side note, using v1 does cause another issue "Vue.use is not a function", seemingly derived from https://github.com/smth/goodtables-ui/blob/master/layouts/landing.vue#L122 (which I commented out for the purpose of this test)

0
heejongahn
10
heejongahn
commented 2 years ago

@pi0 @Atinux So what was the actual reason behind this issue? I had similar issue and still can't fully understand what's going on. I'm new to SSR so maybe I'm missing something really basic. I feel like I've just dodged, not solved, the problem 🙁

This is my page caused trouble. For other pages in the repository, there wasn't any problem. However, for this page, if I access it directly (i.e. type http://ahnheejong.name/resume/ on browser address bar and hit enter) it caused some strange situation - nothing but <footer> was left, all the other elements disappeared after hydration. (If I first visit root and then navigate to the page, same issue didn't occur.)

I first thought it was because of invalid markup causing difference between server-side/client-side rendered templates. So I ran W3C HTML validator for like 5 times. It wasn't the case. As resume page itself does almost nothing in JS-side, I thought it might be domain issue.

This is my prior domain setup.

  • http://ahnheejong.name(domain) -> http://heejongahn.github.io/ahnheejong.name (project github pages)

I thought it might have something to do with that /ahnheejong.name path, so I tried changing the site-hosting repository (from ahnheejong.name to heejongahn.github.io).

  • http://ahnheejong.name(domain) -> http://heejongahn.github.io (github pages)

And there, the problem disappeared 😯 I'm glad that it's gone, but I still am not sure what makes the difference. The only thing seems suspicious to me is this line, using absolute path as href attribute. But can this be the case? The link will actually work fine regardless of domain setting behind, and the markup itself stays same anyway…

Thanks in advance. Any thoughts/hints would help me a lot!

1
smth
0
smth
commented 2 years ago

I still haven't resolved this. One thing I can add at this stage is that in my case the element only disappears if you are landing on that page, or you refresh. If you navigate there from elsewhere within the site, all is fine.

0
eruby94
0
eruby94
commented 2 years ago

@smth I've had this issue as well with an open source calendar component. The behavior is the same, that it only comes from direct navigation, so I get the impression there is something wonky with the SSR behavior for some specific implementation of component

0
eruby94
0
eruby94
commented 2 years ago

@smth after some further digging, I have resolved my issue. Hopefully it helps you as well.

Check out this package: https://www.npmjs.com/package/vue-no-ssr

It's lightweight, and simple to implement

0
Atinux
24.6k
Atinux
commented 2 years ago

@eruby94 Actually we implemented <no-ssr> inside Nuxt.js core, so you don't have to install vue-no-ssr ;)

0
eruby94
0
eruby94
commented 2 years ago

@Atinux so I can just use no-ssr out of the box? I only want a single component to be affected, not an app-wide config

0
Atinux
24.6k
Atinux
commented 2 years ago

Yep, you just wrap the component you want to be only rendered on client-side with <no-ssr> :)

2
smth
0
smth
commented 2 years ago

I just tried the <no-ssr> suggestion. Tried wrapping the problematic elements, and then wrapping everything in the template. Neither helped in my case.

Edit: So after looking at the release notes I found that the <no-ssr> feature wasn't present in the version of Nuxt I was using.

I have now tried using the latest version, this actually replicates the issue locally, i.e the elements now disappear locally too. It still does not fix the problem.

0
lanbau
3
lanbau
commented 2 years ago

hi i am facing the same issue. My component disappears when:

  • i press back button
  • enter the full url in the browser search box

the site is build via npm run generate

it seems that asyncData is not being triggered

  • my site works fine on localhost but does not when i host the files
0
rlam3
25
rlam3
commented 2 years ago

@smth @lanbau any workaround? I'm aving the same issue with firebase and surge.sh

It seems like there should be a better way to turn on/off no-ssr for components… Its ridiculous to wrap each component in no-ssr tags…

0
smth
0
smth
commented 2 years ago

@rlam3 no updates from me I'm afraid, other than my problem disappeared after some seemingly unrelated changes to the page. So the issue is no longer present in the example I give in the original post, but I can't say why. I removed one of the router-links, but I think I'd tried that previously.

0
delucis
8
delucis
commented 2 years ago

I’m coming up against a similar (the same?) issue — I have a <page> component with a <slot> for content and various props. It seems to work in general, but on one page, once the bundle loads on the client anything rendered in the slot and any components loaded by the <page> component vanish. Again, only happens from a static server, can’t reproduce it on a local machine using any combination of the build, start, and generate commands, and only happens on one page. Can’t figure out any way to debug it.

0
BonnieDoug
25
BonnieDoug
commented 2 years ago

I have the same issue. Except it's my side navigation bar which is present on every page.. So when it breaks it breaks everything 😑. The thing that's strange is, it only happens randomly, not every time.

0
delucis
8
delucis
commented 2 years ago

Everything I’ve dug up points to the problem being a difference between the server-rendered markup and what the client JS expects to encounter. According to Vue’s SSR docs, this can happen if your template includes HTML that isn’t valid.

However, in my case, I was deploying a form to Netlify for it to handle, using a netlify attribute on the form. However, it seems that means Netlify changes the source, injecting some of its own stuff into the markup. That means once the client JS kicks in, it discovers the mismatch, and boom 💥 , everything vanishes.

Is there a way to tell the Nuxt client to leave SSR markup alone?

0
Atinux
24.6k
Atinux
commented a year ago

Sadly it's Vue.js which breaks it when hydrating. You can still wrap your Netlify form with <no-ssr> to avoid this.

0
BonnieDoug
25
BonnieDoug
commented a year ago

Could this same issue be caused by running mod_pagespeed do you think?

0
delucis
8
delucis
commented a year ago

In case anyone else comes here looking for a solution to Nuxt + Netlify Forms, you can adapt their advice for use with React.

The netlify keyword means they post-process your form creating a mismatch between the static HTML and what Vue expects. To avoid this you can add a “dummy” static HTML file with your form tagged with the netlify keyword, then create your Vue/Nuxt form without the keyword but including a hidden field that matches your dummy HTML form name, e.g. <input type="hidden" name="form-name" value="contact" />.

This avoids using <no-ssr> and not having your form as static HTML.

0
dmydry
5
dmydry
commented a year ago

@delucis Thanks for your detailed investigation. I stuck into this issue too.
Could you explain please where exactly we can put this “dummy” static HTML file?
I assume you're using a simple deploy flow like yarn generate. So just a static form.html file in /static folder doesn't help. I understand that the best way as it's explained in the React example article to put a dummy form to index.html template.

Thanks

0
delucis
8
delucis
commented a year ago

Hi @dmydry, I’m deploying using npm generate.

I include a very simple static “dummy” file, e.g. static/form-dummy/index.html, including something like this:

<form name="MYFORM" action="/form/success" netlify>
  <!-- form controls here -->
</form>

Then I have the form users will actually see, e.g. pages/form/index.vue:

<form name="MYFORM" action="/form/success" method="post">
  <input type="hidden" name="form-name" value="MYFORM" />
  <!-- form controls here -->
</form>

The dummy file is copied from static to dist by Nuxt which means Netlify finds it and creates a form with the name you specify (MYFORM above) in its Form Handling panel.

You just need to make sure you add that hidden <input> in the Vue component so that Netlify recognises the form submission as associated with the form called MYFORM. I think you also need to ensure all the inputs you want to receive data for are on both forms.

Hope that helps!

0
dmydry
5
dmydry
commented a year ago

Guys, for those who will be looking for it.

Nuxt.js netlify form-handling

https://www.netlify.com/docs/form-handling/

  1. create an html file (for ex. form.html) with a hidden form
<form name="contact-form" netlify netlify-honeypot="bot-field" hidden>
  <input type="text" name="name" />
  <input type="email" name="email" />
  <textarea name="message"></textarea>
</form>
  1. create your form in your vue file with a hidden input
    <input type="hidden" name="form-name" value="contact-form" />
    and the rest normal inputs with the same names as in hidden form

  2. make sure you put method="post" in your vue form

In case it's still not working please check this article https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/ and its Troubleshooting tips paragraph.

0
dmydry
5
dmydry
commented a year ago

wow, fast)) thanks @delucis
Did the same but missed a method="post" in my vue form
Lets leave these answers here in case if someone else will be looking for this

1
Informations
Bug ReportOpen
#c619 - Created 2 years ago