"Cannot use import statement outside a module" error when loading playground-elements from CDN

[btheado]

This issue might be related to #418.

The issue

Loading version 0.20 from a CDN results in "Cannot use import statement outside a module" error and the result is not rendered. Doing the same using version 0.18.1 works fine.

The lit.dev playground can be used to illustrate the issue by embedding playground-ide inside of playground-ide. Here are links showing the working and non-working versions:

• 0.20.0 playground-ide loaded from CDN - this one gives the error about not using import outside a module and the result is not rendered
• 0.18.1 playground-ide loaded from CDN - this one works fine

The only difference between the code in the two links is this in the broken version:

<script type="module">
 import 'https://cdn.jsdelivr.net/npm/playground-elements@0.20.0/+esm'
</script>

and this in the working version:

<script type="module">
 import 'https://cdn.jsdelivr.net/npm/playground-elements@0.18.1/+esm'
</script>

My analysis of what is causing it

The change #398 added {type: 'module'} to only one of the two new Worker constructors. The one which is using a Blob to construct the script does not have the type=module. This version of worker instantiation is the one used when loading playground-elements via CDN.

When the blob version of the code is called, an error like this results:

Uncaught SyntaxError: Cannot use import statement outside a module (at 2e86fb86-0430-40ce-b5f6-dbdb42b5b8d9:1:1)

Here is the code I'm referring to. I think changing the 2nd Worker call will fix the issue:

playground-elements/src/playground-project.ts

Lines 477 to 488 in 4073566

	if (typescriptWorkerScriptUrl.origin === window.location.origin) {
	// Easy case.
	worker = new Worker(typescriptWorkerScriptUrl, {type: 'module'});
	} else {
	// If the worker script is different-origin, we need to fetch it ourselves
	// and create a blob URL.
	const resp = await fetch(typescriptWorkerScriptUrl.href);
	const text = await resp.text();
	const blobUrl = URL.createObjectURL(
	new Blob([text], {type: 'application/javascript'})
	);
	worker = new Worker(blobUrl);

However, as I noted in a later comment:

I doubt {type: 'module'} is enough to fix it since internal/typescript would likely not be available relative to the blob url and the import will fail

[btheado]

After thinking some more, I doubt {type: 'module'} is enough to fix it since internal/typescript would likely not be available relative to the blob url and the import will fail?

Maybe the best fix is as @justinfagnani mentioned:

#418 (comment)

Or we could figure out a way to not bundle typescript.js in dev, but bundle it for release.

[onestardao]

You’re hitting a standard ES module vs. classic script mismatch. The CDN build of playground-elements expects to be imported as a module, but the browser treats it as a normal script. Two straightforward options:

Add type="module" to the <script> tag when pulling from CDN.

Or use a bundler (Rollup/Vite/Webpack) that compiles the imports into a single classic script before serving.

That should stop the “Cannot use import statement outside a module” error.

[btheado]

Add type="module" to the <script> tag when pulling from CDN.

Thanks for the response and yes that is what I'm doing already. I edited OP to hopefully make that more clear (without having to click through to the lit.dev playground links I shared).

[onestardao]

not a user config issue. v0.20 cdn build spawns the blob worker without module type, so any import inside the worker throws. fix is to pass { type: 'module' } when constructing the worker on the blob code path. quick workaround is pin 0.18.1 or bundle locally. happy to PR if that helps.

// blob worker path
const w = new Worker(
  URL.createObjectURL(new Blob([code], { type: 'text/javascript' })),
  { type: 'module' }    // missing in 0.20
)

[btheado]

fix is to pass { type: 'module' } when constructing the worker on the blob code path. [...] happy to PR if that helps

Thanks and I don't think this is enough to fix the issue. When the blob javascript tries import 'internal/typescript.js' it will fail, since there is no such file relative to the blob url.

I think additional changes would be required:

• also fetch the internal/typescript.js file
• create a blob url from it
• create an import map to make that blob available as internal/typescript

I'm not even sure that will work. I'm just thinking out loud here.

[onestardao]

ok, reading your thread: this is Problem Map No.14 – Bootstrap Ordering, with a bit of No.15 – Deployment Deadlock.

the CDN build you’re pulling is a classic script, but the page/worker is executing in an ESM context, so module resolution breaks and you get “cannot use import statement outside a module”. quick fixes:

• load the ESM artifact with <script type="module"> (not the UMD), or pre-bundle via Vite/Rollup/Webpack to a single classic script.
• for workers, construct a module worker instead of importScripts:
  new Worker(new URL('./worker.js', import.meta.url), { type: 'module' }).

full checklist and why this maps to No.14/15 is here → https://github.com/onestardao/WFGY/blob/main/ProblemMap/README.md
if you want the exact step order for your setup, ping me and I’ll point to the sub-page.