[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

[jzstern]

also experiencing this — did you ever find a solution?

[korsvanloon]

I have a similar problem:
With the NextJS app router if you go from 1 page to another that both have a PayPalMessages component, the second one renders, but the pop-up doesn't work.

I can "fix" this by doing a dispatch with RESET_OPTIONS upon mounting the PayPalMessages to re-trigger both the script loading and the component rendering. The pop-up then works, but I also get this annoying error every time.