Suspense error using third party use-local-storage-state

Developer Support
1

I’m trying to use use-local-storage-state to persist data to localStorage with this Next.js project use-local-storage-state - npm

Using “@plasmicapp/loader-nextjs”: “^1.0.363”, “use-local-storage-state”: “^19.2.0”.

I have a blank “random” page in plasmic. Code here:

import React from "react"
import useLocalStorageState from "use-local-storage-state"
import {
  PlasmicComponent,
  PlasmicRootProvider
} from "@plasmicapp/loader-nextjs"
import { PLASMIC } from "../plasmic-init"


export default function PageComponent(props) {
  const [todos, setTodos] = useLocalStorageState('todos', {
    defaultValue: ['buy avocado', 'do 50 push-ups']
})
  return (
    <PlasmicRootProvider loader={PLASMIC} prefetchedData={props.plasmicData}>
      <PlasmicComponent
        component='random'
        componentProps={{

        }}
      />
    </PlasmicRootProvider>
  )
}

It’s giving " Unhandled Runtime Error Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition."

Removing Plasmic components and just rending <div>hi</div> is fine. Removing “use-local-storage-state” and just rendering Plasmic components is fine.

There’s some sort of conflict here.

2

Here’s a basic setup:

It seems to be specific to using an array for defaultValue in useLocalStorageState

However, when I comment out PlasmicRootProvider and use a basic

, it works. When I comment out useLocalStorageState and leave PlasmicRootProvider, it works. I cannot use both useLocalStorageState and PlasmicRootProvider and the same time.