Unable to boot the latest version of WebContainer on Cloudflare

[alphanout]

Describe the bug

Description
I deployed an application to Cloudflare using @webcontainer/api version 1.5.1-internal.10. When the application loads, the WebContainer initialization fails. Everything works correctly in my local environment, but after deploying to Cloudflare, I encounter the following errors:

Firefox Error

WebContainer: Error loading WebContainer: TypeError: URL constructor: undefined is not a valid URL.
    get url https://back.pluto-diy.pages.dev/assets/Header-CnqwZNVE.js:156
    UIe https://back.pluto-diy.pages.dev/assets/Header-CnqwZNVE.js:157
    $Ie https://back.pluto-diy.pages.dev/assets/Header-CnqwZNVE.js:157
    boot https://back.pluto-diy.pages.dev/assets/Header-CnqwZNVE.js:157
    Xu https://back.pluto-diy.pages.dev/assets/Header-CnqwZNVE.js:159
    promise callback* https://back.pluto-diy.pages.dev/assets/Header-CnqwZNVE.js:159

Chrome Error

Header-CnqwZNVE.js:159 WebContainer: Error loading WebContainer: TypeError: Failed to construct 'URL': Invalid URL
    at get url (Header-CnqwZNVE.js:156:2626)
    at UIe (Header-CnqwZNVE.js:157:4468)
    at $Ie (Header-CnqwZNVE.js:157:3722)
    at Gh.boot (Header-CnqwZNVE.js:157:252)
    at Header-CnqwZNVE.js:159:381

Findings
Upon further investigation, I traced the error to the following code in node_modules/@webcontainer+api@1.5.1-internal.10/node_modules/@webcontainer/api/dist/internal/iframe-url.js:

import { DEFAULT_EDITOR_ORIGIN } from './constants.js';
const params = {};
let editorOrigin = null;

export const iframeSettings = {
    get editorOrigin() {
        if (editorOrigin == null) {
            editorOrigin = new URL(globalThis.WEBCONTAINER_API_IFRAME_URL ?? DEFAULT_EDITOR_ORIGIN).origin;
        }
        return editorOrigin;
    },
    set editorOrigin(newOrigin) {
        editorOrigin = new URL(newOrigin).origin;
    },
    setQueryParam(key, value) {
        params[key] = value;
    },
    get url() {
        const url = new URL(this.editorOrigin);
        url.pathname = '/headless';
        for (const param in params) {
            url.searchParams.set(param, params[param]);
        }
        url.searchParams.set('version', "1.5.1-internal.10");
        return url;
    },
};

In this snippet, this.editorOrigin ends up being undefined when running on Cloudflare, causing the URL constructor to fail. However, switching to version 1.3.0-internal.10, which has a different boot process, resolves the issue.

Steps to Reproduce

1. Deploy an application to Cloudflare that uses @webcontainer/api version 1.5.1-internal.10.
2. Load the deployed site in Firefox or Chrome.
3. Observe the console errors indicating that URL constructor: undefined is not a valid URL.

Expected Behavior
WebContainer should initialize successfully in the Cloudflare environment, just as it does locally.

Actual Behavior
The deployment fails to initialize the WebContainer, returning the above-mentioned console errors.

Environment

• WebContainer API version: 1.5.1-internal.10
• Cloudflare Pages
• Browsers Tested: Firefox, Chrome

Workaround
Using @webcontainer/api version 1.3.0-internal.10 appears to circumvent the issue, suggesting that the problem is tied to how the newer version constructs the URL within iframe-url.js.

Additional Context
It appears that globalThis.WEBCONTAINER_API_IFRAME_URL or DEFAULT_EDITOR_ORIGIN may not be properly defined in the Cloudflare environment, causing editorOrigin to remain null and leading to the error.

Request

• Please investigate why this.editorOrigin is undefined in version 1.5.1-internal.10 when deployed on Cloudflare.
• Any insights or fixes that ensure Cloudflare compatibility would be greatly appreciated.

Thank you for looking into this! If you need any additional information or logs, please let me know.

Link to the blitz that caused the error

NA

Steps to reproduce

1. Deploy an remix application to Cloudflare that uses @webcontainer/api version 1.5.1-internal.10.
2. Load the deployed site in Firefox or Chrome.
3. Observe the console errors indicating that URL constructor: undefined is not a valid URL.

Expected behavior

Backward Compatibility of "@webcontainer/api": "1.5.1-internal.10" lib to boot the container on cloudflare pages
Working on local in dev mode.

Parity with Local

• I have run the project in my local machine and I could not reproduce the issue.

Screenshots

No response

Platform

• OS: macOS
• Browser: Chrome, Firefox
• Version: "@webcontainer/api": "1.5.1-internal.10",

Additional context

It appears that globalThis.WEBCONTAINER_API_IFRAME_URL or DEFAULT_EDITOR_ORIGIN may not be properly defined in the Cloudflare environment, causing editorOrigin to remain null and leading to the error.

[SamVerschueren]

I believe the problem is that Remix does SSR and tries to boot WebContainer which doesn't work in a Cloudflare Worker. You need to wrap the webcontainer boot inside a check so it's only ran client side.

if (!import.meta.env.SSR) {
   WebContainer.boot();
}