google / google/playground-elements
"Cannot use import statement outside a module" error when loading playground-elements from CDN
- 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
Assessment
This issue has not been assessed yet.