Skip to content

Instantly share code, notes, and snippets.

@fuweichin

fuweichin/foobar-experimental.js

Created June 25, 2022 01:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fuweichin/19b9e51ab09cf77ae35e4505b30d6913 to your computer and use it in GitHub Desktop.
Save fuweichin/19b9e51ab09cf77ae35e4505b30d6913 to your computer and use it in GitHub Desktop.
Download ZIP
Chrome 103: import-maps doesn't work with modulepreload
Raw
foobar-experimental.js
import foo from 'foo';
import bar from 'bar';
console.log(foo, bar);
Raw
foobar.js
import foo from 'data:application/javascript;charset=utf-8,export%20default%20%7Bname%3A%20%22foo%22%7D%3B';
import bar from 'data:application/javascript;charset=utf-8,export%20default%20%7Bname%3A%20%22bar%22%7D%3B';
console.log(foo, bar);
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Import-maps Test</title>
<link rel="modulepreload" href="./foobar-experimental.js" />
</head>
<body>
<h1>Import-maps Test</h1>
In <q>Chrome Version 103.0.5060.53 (Official Build) (64-bit)</q>, import-maps doesn't work with modulepreload, an error appears in Console which says
<blockquote>An import map is added after module script load was triggered.</blockquote>
<script type="importmap">
{
"imports": {
"foo": "data:application/javascript;charset=utf-8,export%20default%20%7Bname%3A%20%22foo%22%7D%3B",
"bar": "data:application/javascript;charset=utf-8,export%20default%20%7Bname%3A%20%22bar%22%7D%3B"
}
}
</script>
<script>
if (HTMLScriptElement.supports && HTMLScriptElement.supports('importmap')) {
console.time('load');
import('./foobar-experimental.js').then(() => {
console.timeEnd('load');
}, (err) => {
console.error(err);
});
}
</script>
<script>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment