SSR "use client"

[dima-kov]

Is it possible to use @stripe/connect-js/pure in next.js app in client side components ("use client").

Now next.js app raises error:

ConnectJS won't load when rendering code in the server - it can only be loaded on a browser. This error is expected when loading ConnectJS in SSR environments, like NextJS. It will have no impact in the UI, however if you wish to avoid it, you can switch to the `pure` version of the connect.js loader: https://github.com/stripe/connect-js#importing-loadconnect-without-side-effects.

Importing @stripe/connect-js/pure instead of @stripe/connect-js does not help

Any options to make it work?

[jorgea-stripe]

Do you have an example repository/code sample where this error can be reproduced?

[dima-kov]

no really public repo. Found the way to handle this by using dynamic loading:

const Embedded = dynamic<{ code: string }>(
    () => import('_components/Balances').then(mod => mod.Embedded), {
      ssr: false
    });

is it okay way?

[tonyxiao]

Here's a repo with minimal repro https://github.com/tonyxiao/next-js-load-stripe-bug

pnpm install
pnpm run dev

Then load the home page localhost:3000

next-js-load-stripe-bug on  main [!] via  v21.7.2
❯ pnpm dev --port 4001

> [email protected] dev /Users/tony/Code/tonyxiao/next-js-load-stripe-bug
> next dev "--port" "4001"

  ▲ Next.js 14.2.4
  - Local:        http://localhost:4001

 ✓ Starting...
 ✓ Ready in 2.5s
(node:8402) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
 ○ Compiling / ...
 ✓ Compiled / in 1770ms (532 modules)
 GET / 200 in 1978ms
 ✓ Compiled in 137ms (250 modules)
 ○ Compiling /favicon.ico ...
 ✓ Compiled /favicon.ico in 814ms (303 modules)
 GET /favicon.ico 200 in 874ms
 ✓ Compiled in 253ms (527 modules)
{
  create: [Function: create],
  update: [Function: update],
  debugInstance: [Function: debugInstance],
  logout: [Function: logout]
}
ConnectJS won't load when rendering code in the server - it can only be loaded on a browser. This error is expected when loading ConnectJS in SSR environments, like NextJS. It will have no impact in the UI, however if you wish to avoid it, you can switch to the `pure` version of the connect.js loader: https://github.com/stripe/connect-js#importing-loadconnect-without-side-effects.
 ⨯ unhandledRejection: ConnectJS won't load when rendering code in the server - it can only be loaded on a browser. This error is expected when loading ConnectJS in SSR environments, like NextJS. It will have no impact in the UI, however if you wish to avoid it, you can switch to the `pure` version of the connect.js loader: https://github.com/stripe/connect-js#importing-loadconnect-without-side-effects.
 ⨯ unhandledRejection: ConnectJS won't load when rendering code in the server - it can only be loaded on a browser. This error is expected when loading ConnectJS in SSR environments, like NextJS. It will have no impact in the UI, however if you wish to avoid it, you can switch to the `pure` version of the connect.js loader: https://github.com/stripe/connect-js#importing-loadconnect-without-side-effects.
 GET / 200 in 49ms
 ✓ Compiled in 223ms (527 modules)

[kaiying-stripe]

Running @tonyxiao's example, I saw that connect.js is actually loaded in browser (screenshot below), although throwing the error on the server side. I think this is because using next.js, the js code is executed both on the server and on the client side, and we can avoid the error by avoid running it on the server side with checks like typeof window !== 'undefined'.

[tonyxiao]

yea when it says pure i would expect it to have no side effects like this.