Front-end is not rendered properly

Get Help
#1

Hi, I am pretty new to Vuejs storefront and I been trying to setup a working local version of vuejs storefront, however I haven’t been able to figure out why some vue components are missing even though everything has been installed correctly. Can someone give me a guidance on how to fix this issue?

here are some of the errors:

The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside

, or missing . Bailing hydration and performing full client-side render.

Unknown custom element: SfHeaderNavigationItem

Unknown custom element: SfMegaMenuColumn

Annotation 2020-09-10 132315
Annotation 2020-09-10 1323151459×1141 308 KB

#2

I’ve just installed the newest PWA with Capybara and it works fine. What version do you use? Are you sure you have the newest version of packages? Have you properly setup your config in PWA?

#3

vue-storefront is version 1.12.2

I tried it on 2 separate machines and it still gives me the same error as above. on Window I followed manual installation and on Mac I used the yarn installer

#4

I’m also having this issue. I think it has something to do with the timing of when the internal global components get loaded. But this is just a guess, as I’m new around here.

Will keep looking deeper.

#5

Try changing the vue version to ‘^2.6.11’ in package.json of capybara. It fixed the issue for me. I am using develop branch for vue-storefront and capybara.

1 Like
#6

it still hasn’t worked out for me unfortunately. this does not happen when I used the default theme though.

#7

changing the vue version in capybara worked for me, but not without some yarn package management rigamarole. I had to:

  1. switch to the develop branch
  2. run yarn installer and install the develop version of the capybara theme
  3. modify capybara’s vue version to ^2.6.11
  4. remove both node_modules directories in the root and capybara directories
  5. make sure there are no changes in the yarn.lock file
  6. run yarn
  7. then run yarn dev

That was the only way I could get SF1 working with capybara. Thanks @mohammad-k8. I’m still a bit confused on why this fix works, as capybara’s vue semver, ^2.6.6, allowed for 2.6.11 to be installed. So, I think the fix has to do with using the develop versions.

Anyway, thanks again!