Wasmer fails to load in React application created with create-react-app

[turingbuilder]

I am trying to use "@wasmer/sdk" from a single page React application that was created using create-react-app.

The error reported in the console is:

Not allowed to load local resource: file:///Users/.../node_modules/@wasmer/sdk/dist/WasmerSDK.js

I installed the SDK via:

npm i "@wasmer/sdk"    # Installs "@wasmer/sdk": "^0.6.0",

In the React component Wasmer is loaded like this:

import { init, Directory, Wasmer } from "@wasmer/sdk";

...

export default WasmerContext(...) {
    const [python, setPython] = useState<null | Wasmer>(null);
    useEffect(() => {
        import("@wasmer/sdk").then(imported => {
            imported.init().then(() => {
                console.log("Wasmer loaded");
                imported.Wasmer.fromRegistry("python/python").then(python => {
                    if (!python) {
                        console.log("wasmer runtime loaded python");
                        setPython(python);
                    }
                });
            })
        });
    }, [])

    ...
}

At no place in the application do I explicitly call for the "file:///Users/.../node_modules/@wasmer/sdk/dist/WasmerSDK.js" URL, so I assume that somewhere in the initialization code of Wasmer it must be embedding that URL.

This is a production build, built using the command:

npm run build

[Linear]

SDK-81 Wasmer fails to load in React application created with create-react-app

[turingbuilder]

I have confirmed that this is some kind of issue with WasmerJS vs create-react-app. After porting our application to use vite, loading Wasmer works by following the ffmpeg-react example.

However there is another issue that seems much more difficult:

Our application also uses Auth0, and requiring the Cross-Origin-Opener-Policy: same-origin, and Cross-Origin-Embedder-Policy: require-corp effectively breaks Auth0. I get that those headers are needed because of the shared buffers, but it's a very unfortunate tradeoff.

If the Wasmer team is receptive of feedback:

• There are many users of create-react-app, making sure that WasmerJS works with it out of the box will make uptake of WasmerJS easier.
• Somehow making this work without COOP and COEP so that providers like Auth0 continue to work out of the box would also help uptake.

[Jonathan Padilla]

I get the same error with create-next-app

Decided wasn't feasible to use nextjs + wasmer but maybe I'm not investigating hard enough