ReferenceError: localStorage in not defined

Support
, , ,
#1

This chunk of js is killing my build:

data: () => ({
        showMessage: !localStorage.getItem("hideMessage"),
    }),
    methods: {
      dismissMessage: function(){
        this.showMessage = false;
        localStorage.setItem("hideMessage", true);
      },

Here’s the error from the deploy log:

12:00:04 PM: ReferenceError: localStorage is not defined
12:00:04 PM:     at a.data (src/layouts/Default.vue:232:18)
12:00:04 PM:     at /opt/build/repo/node_modules/vue/dist/vue.runtime.common.prod.js:6:28667
12:00:04 PM:     at /opt/build/repo/node_modules/vue/dist/vue.runtime.common.prod.js:6:28727
12:00:04 PM:     at pn (/opt/build/repo/node_modules/vue/dist/vue.runtime.common.prod.js:6:28934)
12:00:04 PM:     at a.e._init (/opt/build/repo/node_modules/vue/dist/vue.runtime.common.prod.js:6:32700)
12:00:04 PM:     at new a (/opt/build/repo/node_modules/vue/dist/vue.runtime.common.prod.js:6:30340)
12:00:04 PM:     at Vi (/opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:66307)
12:00:04 PM:     at io (/opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:70537)
12:00:04 PM:     at ro (/opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:70210)
12:00:04 PM:     at eo (/opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:67457)

I get that localStorage belongs to the browser, so what’s the best way to get Netlify to ignore this or skip it? I haven’t been able to find much in the community based on this.

#2

Maybe add a check similar to this:

if(window) {
  // use localStorage
} else {
  return true 
}

Since Node.js doesn’t have a window object, the function will return true by default without using localStorage.

#3

Thanks @benborgers, I got some help in the Gridsome community too. Added a check to see if in the browser:

data: () => ({
    showMessage: process.isClient
        ? !localStorage.getItem("hideMessage")
        : false,
})