I have a homemade audio player that works perfectly on my website when linked to the page via regular script tag:
<head>
…
<script type="application/javascript" src="/static/js/player.js"></script>
</head>
The script itself is written in plain JS without any libraries, frameworks, etc. Here is the demo of how it works: you press the triangle, the player starts to play; there’s nothing special here. (It may not work in some old browsers, but this doesn’t matter now.)
However, the player got broken if I link it with dynamic import (in browsers that support this kind of import). In HTML, another script index.js is linked instead of player.js, and this index.js imports player.js:
// index.js
console.log('index.js is running…');
import('/static/js/player.js');
Here is the second demo of this version, tested in Chrome on Windows and Safari on macOS, all browsers and OS’s being of latest versions at the moment of this post.
player.js seems to be loading and executing. When I include console.log()s into it, it outputs them exactly where I expect; I also didn’t find any runtime difference from the previous version with the debugger in Dev Tools.
But the audio player is not working in this case. If you press the triangle, then, instead of launching the player, you get only a direct link to the MP3 file. Initially, it was the intended behavior when the script wasn’t loaded or was broken; but I cannot figure out what exactly breaks in this case.
The script player.js is exactly the same in both cases; the only difference is adding dynamic import in the second case. Please help me find what is wrong with it.
from A script broken when linked with dynamic import instead of plain
No comments:
Post a Comment