Order Container: Local storage throwing error in nextjs 13

[danbeck79]

Describe the bug

To successfully wrap the OrderContainer in a next 13 app dir project without errors, you would need to export in a file with use client and dynamically import with ssr: false set, however this stops any children being generated before the client. The reason being is the get local storage check without any protection, e.g in a useEffect or checking for window.

Would it be possible to add these checks before looking for the local storage? Link to code in question below:

https://github.com/commercelayer/commercelayer-react-components/blob/17442ebc31f9c82b857a420c806a63f12e142ad9/packages/react-components/src/components/orders/OrderContainer.tsx#L64C4-L64C4

To Reproduce

No response

System

No response

Additional context

No response

[acasazza]

Hi @danbeck79 , this library already supports NextJS 13. use client is attached at build time. https://github.com/commercelayer/commercelayer-react-components/releases/tag/v4.5.0 Which version are you using?

[danbeck79]

hi @acasazza thank you, we are unable to upgrade to the latest due to another issue in order lists (types have changed and we can't find any information on how to implement). however we tested with the latest and the use client is indeed there but the code on the below code is still an issue where you are doing a localStorage.getItem(key) without any checks which breaks on nextjs

https://github.com/commercelayer/commercelayer-react-components/blob/17442ebc31f9c82b857a420c806a63f12e142ad9/packages/react-components/src/components/orders/OrderContainer.tsx#L64C4-L64C4