google / google/playground-elements

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

Open
#426 6 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
648
Forks
61
PR merge metrics
No merged PRs in 30d

Description

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](https://lit.dev/playground/#project=W3sibmFtZSI6ImluZGV4Lmh0bWwiLCJjb250ZW50IjoiPCFET0NUWVBFIGh0bWw-XG48aHRtbCBsYW5nPVwiZW5cIj5cbjxoZWFkPlxuPHNjcmlwdCB0eXBlPVwibW9kdWxlXCI-XG4gaW1wb3J0ICdodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL3BsYXlncm91bmQtZWxlbWVudHNAMC4yMC4wLytlc20nXG48L3NjcmlwdD5cbjwvaGVhZD5cbjxib2R5PlxuPHBsYXlncm91bmQtaWRlIGVkaXRhYmxlLWZpbGUtc3lzdGVtIGxpbmUtbnVtYmVycyByZXNpemFibGU-XG4gIDxzY3JpcHQgdHlwZT1cInNhbXBsZS9odG1sXCIgZmlsZW5hbWU9XCJpbmRleC5odG1sXCI-XG4gICAgPCFkb2N0eXBlIGh0bWw-XG4gICAgPGJvZHk-XG4gICAgICBIZWxsb1xuICAgICAgPHNjcmlwdCB0eXBlPVwibW9kdWxlXCIgc3JjPVwiLi9pbmRleC5qc1wiPiZsdDsvc2NyaXB0PlxuICAgIDwvYm9keT5cbiAgPC9zY3JpcHQ-XG5cbiAgPHNjcmlwdCB0eXBlPVwic2FtcGxlL2pzXCIgZmlsZW5hbWU9XCJpbmRleC5qc1wiPlxuICAgIGRvY3VtZW50LmJvZHkuYXBwZW5kQ2hpbGQoZG9jdW1lbnQuY3JlYXRlVGV4dE5vZGUoXCJXb3JsZCFcIikpXG4gIDwvc2NyaXB0PlxuPC9wbGF5Z3JvdW5kLWlkZT5cbjwvYm9keT5cbjwvaHRtbD4ifSx7Im5hbWUiOiJwYWNrYWdlLmpzb24iLCJjb250ZW50Ijoie1xuICBcImRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJsaXRcIjogXCJeMy4wLjBcIixcbiAgICBcIkBsaXQvcmVhY3RpdmUtZWxlbWVudFwiOiBcIl4yLjAuMFwiLFxuICAgIFwibGl0LWVsZW1lbnRcIjogXCJeNC4wLjBcIixcbiAgICBcImxpdC1odG1sXCI6IFwiXjMuMC4wXCJcbiAgfVxufSIsImhpZGRlbiI6dHJ1ZX1d) - 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](https://lit.dev/playground/#project=W3sibmFtZSI6ImluZGV4Lmh0bWwiLCJjb250ZW50IjoiPCFET0NUWVBFIGh0bWw-XG48aHRtbCBsYW5nPVwiZW5cIj5cbjxoZWFkPlxuPHNjcmlwdCB0eXBlPVwibW9kdWxlXCI-XG4gaW1wb3J0ICdodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL3BsYXlncm91bmQtZWxlbWVudHNAMC4xOC4xLytlc20nXG48L3NjcmlwdD5cbjwvaGVhZD5cbjxib2R5PlxuPHBsYXlncm91bmQtaWRlIGVkaXRhYmxlLWZpbGUtc3lzdGVtIGxpbmUtbnVtYmVycyByZXNpemFibGU-XG4gIDxzY3JpcHQgdHlwZT1cInNhbXBsZS9odG1sXCIgZmlsZW5hbWU9XCJpbmRleC5odG1sXCI-XG4gICAgPCFkb2N0eXBlIGh0bWw-XG4gICAgPGJvZHk-XG4gICAgICBIZWxsb1xuICAgICAgPHNjcmlwdCB0eXBlPVwibW9kdWxlXCIgc3JjPVwiLi9pbmRleC5qc1wiPiZsdDsvc2NyaXB0PlxuICAgIDwvYm9keT5cbiAgPC9zY3JpcHQ-XG5cbiAgPHNjcmlwdCB0eXBlPVwic2FtcGxlL2pzXCIgZmlsZW5hbWU9XCJpbmRleC5qc1wiPlxuICAgIGRvY3VtZW50LmJvZHkuYXBwZW5kQ2hpbGQoZG9jdW1lbnQuY3JlYXRlVGV4dE5vZGUoXCJXb3JsZCFcIikpXG4gIDwvc2NyaXB0PlxuPC9wbGF5Z3JvdW5kLWlkZT5cbjwvYm9keT5cbjwvaHRtbD4ifSx7Im5hbWUiOiJwYWNrYWdlLmpzb24iLCJjb250ZW50Ijoie1xuICBcImRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJsaXRcIjogXCJeMy4wLjBcIixcbiAgICBcIkBsaXQvcmVhY3RpdmUtZWxlbWVudFwiOiBcIl4yLjAuMFwiLFxuICAgIFwibGl0LWVsZW1lbnRcIjogXCJeNC4wLjBcIixcbiAgICBcImxpdC1odG1sXCI6IFwiXjMuMC4wXCJcbiAgfVxufSIsImhpZGRlbiI6dHJ1ZX1d) - this one works fine

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

import 'https://cdn.jsdelivr.net/npm/playground-elements@0.20.0/+esm'

```
and this in the working version:
```html

import 'https://cdn.jsdelivr.net/npm/playground-elements@0.18.1/+esm'

```

## 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:

https://github.com/google/playground-elements/blob/407356612f5fc88fd38830d57c17eaf4fdc3f6f7/src/playground-project.ts#L477-L488

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.