I’m encountering an issue with my Next.js application where some users receive the following error message:

Window.localStorage getter: Forbidden in a sandboxed document without the 'allow-same-origin' flag.

This error occurs despite not using any iframes in my application. Here’s a sample of the code that’s causing the issue:

import React, { useEffect, useState } from "react";

const STORAGE_KEY = 'top-banner'

export default function TopBanner() {
   const [disabled, setDisabled] = useState(true);

     useEffect(() => {
        if(!localStorage.getItem(STORAGE_KEY)) setDisabled(false)
      }, [])

   if (disabled) return;

   return (<p>Banner</p>)
}

Additional Details:

• Environment: Next.js with React
• Problem Context: The error seems to occur randomly for some users, and not consistently for all.
• Third-Party Scripts: I am using some third-party scripts for analytics and advertising.

Questions:

• What could be causing this error in an environment where no explicit iframes are used?
• Could third-party scripts be the reason behind this error, even if they’re included directly?
• How can I resolve or work around this issue to ensure localStorage can be accessed safely?