[Bug] Error: zoid destroyed all components - when using the messages component in dev mode

[EvgenyPolyakov]

Library used

react-paypal-js

🐞 Describe the Bug

We recently updated our Nexjs project from v12.2 to v14.2.4 and encountered this error

This error appears every time we start the dev server and only when using the messages component in the provider options. When refreshing the page, the error no longer appears.

🔬 Minimal Reproduction

npx create-next-app@latest (Would you like to use App Router -> NO)

cd my-app

yarn add @paypal/react-paypal-js

Modify src/pages/_app.tsx

...
const options = {
    clientId: 'test',
    currency: 'EUR',
    components: 'messages',
};

export default function App({ Component, pageProps }: AppProps) {
    return (
        <PayPalScriptProvider options={options}>
            <Component {...pageProps} />
        </PayPalScriptProvider>
    );
}

yarn dev

Check console

😕 Actual Behavior

I noticed that when launching dev mode, the SDK downloads the paypal script 2 times, apparently this causes an error. When refreshing the page, the error no longer appears, apparently because the __paypal_storage__ key has been added to Local Storage. If the key is deleted, the error will occur again. In production, the script is also loaded 2 times, but no error occurs.

🤔 Expected Behavior

No error in the console

🌍 Environment

• Node.js: 20.11.0
• OS: Windows 10
• Browser: Chrome
• @paypal/react-paypal-js: 8.5.0
• next: 14.2.4
• react: 18.3.1
• react-dom: 18.3.1