I'm experimenting with Javascript modules both via desktop (latest Chrome) and mobile (Safari with iOS 14.6) and my code works perfectly on the desktop (standard browser or mobile emulation mode) but fails on my iPhone. The imported JS code using <script type="module"> simply doesn't execute despite being supported since Safari iOS 11 onward according to https://caniuse.com/?search=modules
The test code below, adapted from How to serve ES6 modules on Safari? , is hosted on a webserver in my local network reachable by both the mobile & desktop clients. For mobile debugging I'm using a locally copied version of https://www.hnldesign.nl/work/code/mobileconsole-javascript-console-for-mobile-devices/ to render console.log commands on mobile.
test_ios.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
console.log("Start of test_ios.html...");
</script>
<title>TESTS IOS</title>
<script src="/static/hnl.mobileConsole.1.3.js"></script>
<script nomodule src="/static/fallback.js"></script>
<script type="module">
console.log("Starting the main script.");
// The following line seems to cause an error in Safari only
import { TestClass } from './static/test_module.js';
// The rest is not executed due to the error
let test_class = new TestClass;
console.log("Done.");
</script>
<script>
console.log("End of test_ios.html...");
</script>
<body>
</body>
</html>
/static/test_module.js
export class TestClass {
constructor() {
console.log("Created a test class in test_module.js");
document.body.append("test_module.js");
}
}
/static/fallback.js
console.log("Fallback.js");
document.body.append("Fallback");
Result on the desktop, as expected
Test string test_module.js gets written onto the web page & the following lines are in the console:
--==## Mobile Console v1.3.5 active ##==--
End of test_ios.html...
Starting the main script.
Created a test class in test_module.js
Done.
Result on iOS 14 - neither the module JS nor the fallback get executed
The page is blank (no document.body.append(...) was executed) & only the following lines are in the console:
--==## Mobile Console v1.3.5 active ##==--
End of test_ios.html...
Further checks already done:
- I sniffed the network and I see that
/static/test_module.jsis requested by the mobile device (no request forfallback.js). - The content-type of
/static/test_module.jsreturned by the webserver seems coherent (application/javascript; charset=utf-8). - Renaming
test_module.jstotest_module.mjsdoesn't help (same outcome as above)