ReferenceError: localStorage in not defined

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 (src/layouts/Default.vue:232:18)
12:00:04 PM:     at /opt/build/repo/node_modules/vue/dist/
12:00:04 PM:     at /opt/build/repo/node_modules/vue/dist/
12:00:04 PM:     at pn (/opt/build/repo/node_modules/vue/dist/
12:00:04 PM:     at a.e._init (/opt/build/repo/node_modules/vue/dist/
12:00:04 PM:     at new a (/opt/build/repo/node_modules/vue/dist/
12:00:04 PM:     at Vi (/opt/build/repo/node_modules/vue-server-renderer/
12:00:04 PM:     at io (/opt/build/repo/node_modules/vue-server-renderer/
12:00:04 PM:     at ro (/opt/build/repo/node_modules/vue-server-renderer/
12:00:04 PM:     at eo (/opt/build/repo/node_modules/vue-server-renderer/

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.

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.

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,