browser displaying issue with {#each} block in svelte-sapper component

Question

I'm running into an issue that I'm not sure if it is a result of me or the browser :) I've been using Sapper for few months now and loving it. Everything is working when I view it in Chrome browser but Edge/Opera/Firefox/Brave browsers give me an error explained below.

I have an object of arrays (I can post it but it's irrelevant) that I store in localStorage and assign it to a variable (storeitems), which is in a sapper store. The menustore.js is basic

import { writable } from 'svelte/store';
let menustore;
export default menustore = writable();

In my component where I iterate over the array of object, I get the array of object from localStorage and assign/update my store and assign my component local variable (storeitems).

<script>

  import { onMount } from 'svelte';      

  import menustore from './menustore.js'
  let storeitems = [];
     
  onMount(async () => {
  let getstorage = JSON.parse(localStorage.getItem('menu'));
  menustore.set(getstorage)
  menustore.subscribe(val=>{
  storeitems = val
  })
  }) 

</script>

In my html, I use each block to iterate over my array and display it:

   line 92 -->   {#each browseritems as category}
                   <li>
                      Category Name : {category.category}
                   </li>
                 {/each}

When I go to any browswer, the only one is displaying the page is Chrome browser, every other browser page is empty/blank/white (just the menu on top where if I navigate to other pages will display the respective page) so the application is running but if I go to the page with iteration, nothing... in dev tools, I see error :

browser.svelte:92 Uncaught (in promise) TypeError: Cannot read property 'length' of null
    at Object.update [as p] (browser.svelte:92)
    at update (index.mjs:656)
    at flush (index.mjs:628)

As you can see, storeitems is initiated as an array (let storeitems = []) and Chrome display the result of the iteration by displaying the categories correctly. The array of object and the iteration works (displayed correctly) in Chrome but not in other browsers (my point is: it is not the object)

Any idea why? Why chrome is iterating correctly but other browsers are giving me the error cannot read preporty 'length' of null?

rixo rixo · Accepted Answer · 2021-01-17T01:31:50

localStorage.getItem('menu') // => null
JSON.parse(localStorage.getItem('menu')) // => null

And, you said?

Cannot read property 'length' of null

Hmm.

Are you sure the object is stored in localStorage before you try to read it?

browser displaying issue with {#each} block in svelte-sapper component

1 Answers