SyntaxError: Cannot use import statement outside a module
WebReflection opened this issue · comments
Background
I've noticed this error even if the module worked without issues, and this error happens only when I try the presented code via localhost. The error is not shown whenever I use an IP address instead, being 192.168.x.x, 127.0.0.1, or 0.0.0.0.
Issue
After posting some data to store to a Worker created as {type: "module"}, the browser shows, even after using the module correctly, an error:
The browser is Chromium Version 93.0.4577.82 (Official Build) Arch Linux (64-bit)
Test
Given the following index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="module">
const worker = new Worker('./worker.js', {type: 'module'});
worker.addEventListener('message', ({data}) => {
console.log(data);
});
worker.postMessage({
some: ['data'],
and: ['some', 'other', 'data']
});
</script>
</head>
</html>and the following worker.js file:
import {get, set} from 'https://cdn.jsdelivr.net/npm/idb-keyval@6/+esm';
get('data').then(data => {
console.log('idb', data);
});
addEventListener('message', ({data}) => {
set('data', data).then(() => {
postMessage(data);
});
});The error is shown after some delay, even if everything actually worked as expected.
And then again ... if I try with another local web server the issue is not reproducible ... silly me I haven't tried that before.
Nothing to do here, sorry for the noise.