ApiPromise.create({ provider: wsProvider }) function causing react webpage to not load on safari browsers

[B35000]

Im building a wallet using CRA (react-js) that lets users see and interact with their DOT and KSM cryptocurrencies (among others) and so far everything works. However, my react webpage fails to load on Safari browsers and instead shows a blank white page. Ive narrowed it down to this specific function i use in my code that initializes a connection to a provider to load the balance data:

const wallet = await this.generate_dot_wallet(seed)
const address = wallet.dot_address
const wsProvider = new WsProvider('wss://polkadot-rpc.publicnode.com');
const api = await ApiPromise.create({ provider: wsProvider }); <---------- this line right here is causing safari to fail to load the entire page and show a blank white page.
await api.isReady;
const existential_deposit = await this.get_existential_dot_deposit(api)
const address_balance = await this.get_dot_balance(address, api)
await api.disconnect()

Now i read somewhere that safari is pretty sensitive to errors so i looked at its logs in the safari console and found something like this:

SyntaxError: Unexpected token '{'

when i expand the error, it shows me the error is in this specific line in a bundle.js file:

static with(Types) {
let definition;
// eslint-disable-next-line no-return-assign
const setDefinition = d => definition = d;
return class extends Enum {
  static { <---------------------this token right here is causing the error
    const keys = Array.isArray(Types) ? Types : Object.keys(Types);
    const count = keys.length;
    const asKeys = new Array(count);
    const isKeys = new Array(count);
    for (let i = 0; i < count; i++) {
      const name = (0,_polkadot_util__WEBPACK_IMPORTED_MODULE_9__.stringPascalCase)(keys[i]);
      asKeys[i] = `as${name}`;
      isKeys[i] = `is${name}`;
    }

My webapp is working fine on Chrome, Firefox and the other browsers but failing on all safari browsers (both MacOS and iOS). The issue popped up a few weeks ago and since this is a library issue, there isn't much i can do other than disable support for DOT and KSM until the issue is resolved.

Safari: Version 15.5 (17613.2.7.1.8), NPM version: 9.6.7, Node version: 18.17.1 and the polkadot.js dependency version in my package.json:

"@polkadot/api": "^14.0.1",
"@polkadot/util-crypto": "^13.1.1",
"@polkadot/wasm-crypto": "^7.3.2",

and my import statements look like this:

import { Keyring, ApiPromise, WsProvider } from '@polkadot/api'; 
import { waitReady, } from '@polkadot/wasm-crypto';
import { encodeAddress, decodeAddress } from '@polkadot/util-crypto';

[valentinfernandez1]

I am not able to recreate this as I am working on a Linux machine so some community help would be needed. Adding the Help Wanted tag.

[rajk93]

@B35000 @valentinfernandez1 I have tried to recreate the issue.

I tested a minimal React application with the same Polkadot.js API version (14.0.1) and React version (19.1.0) on Safari, and it works correctly. Here's what my test shows:

1. I created a simple React app that connects to the Polkadot network using the exact same approach — ApiPromise.create({ provider: wsProvider }) with wss://polkadot-rpc.publicnode.com as the RPC endpoint, followed by api.rpc.system.name().

2. My implementation works in Safari without any issues. The page loads properly and displays the chain name (no errors).

3. I'm using Node v18.17.1, which is the same version mentioned in the issue.

I’d be happy to share more details about my test implementation if needed.

[B35000]

What version of @polkadot/api are you using?
ive recreated the issue in a separate cra page. Here is the repo if you want to try it out for yourself. Ive also tried updating the @polkadot/api version im using to the latest version and the issue is still there.

[rajk93]

As mentioned in the issue comment, I attempted to reproduce the problem using @polkadot/api version 14.0.1.

I also tested the setup from the repository you shared — it works as expected for me on Safari. This suggests that the issue might be related to your local development environment.

Preview on safari