TypeError: Cannot read property 'toLowerCase' of undefined

selfagency commented 3 years ago

So, I just used this in another project and it worked great out of the box no problem.

But now I'm using it in a new project and I'm getting errors.

client.js:739 [Vue warn]: 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 <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

20:11:54.833 client.js:97 TypeError: Cannot read property 'toLowerCase' of undefined
    at emptyNodeAt (vue.runtime.esm.js:5867)
    at VueComponent.patch [as __patch__] (vue.runtime.esm.js:6508)
    at VueComponent.Vue._update (vue.runtime.esm.js:3945)
    at VueComponent.updateComponent (vue.runtime.esm.js:4060)
    at Watcher.get (vue.runtime.esm.js:4479)
    at new Watcher (vue.runtime.esm.js:4468)
    at mountComponent (vue.runtime.esm.js:4073)
    at VueComponent.push../node_modules/vue/dist/vue.runtime.esm.js.Vue.$mount (vue.runtime.esm.js:8415)
    at init (vue.runtime.esm.js:3118)
    at merged (vue.runtime.esm.js:3301)

Here's my config:

    [
      'nuxt-vuex-localstorage',
      {
        localStorage: ['cached']
      }
    ]

What happens is you load the page the first time and it works. Then it saves the data to localstorage, which I verified was correct in debug mode. But refresh the page and you get the error.

If I disable the module, everything goes back to working normally.

I'm using Nuxt 2.14.12 and nuxt-vuex-localstorage 1.2.7.

Thanks.

pareshchouhan commented 3 years ago

Add <client-only placeholder="loading..."> and it works, don't ask me how Client Only Docs It was in the docs/

selfagency commented 3 years ago

A. It's not in the docs for this module.

B. A Nuxt module shouldn't need to be specified as client-only because the whole point is it's designed to work with Nuxt's SSR.

C. Wrapping every single component that uses store data in a client-only module defeats the entire purpose of SSR.

rubystarashe commented 3 years ago

Browser storage is not accessible from the server side.

If conditional rendering is performed according to the module's readiness(like v-if with status), it will be solved.

Make the same initial data when rendering on the server side and on the client side.

rubystarashe / nuxt-vuex-localstorage

TypeError: Cannot read property 'toLowerCase' of undefined #28