Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ECMAScript module (ESM) support not allowing import of modules #13880

Open
1 task done
Fruugul opened this issue Jul 5, 2023 · 1 comment
Open
1 task done

ECMAScript module (ESM) support not allowing import of modules #13880

Fruugul opened this issue Jul 5, 2023 · 1 comment
Labels
bug needs triage This issue hasn't been reviewed by maintainers

Comments

@Fruugul
Copy link
Sponsor

Fruugul commented Jul 5, 2023

I have searched and made sure there are no existing issues for the issue I am filing

  • I have searched the existing issues

Description

The Ti.WebView component doesn't allow for the import of ESM modules in a local environment.

The first issue was that the DOCs suggest renaming JS files that are dynamically imported to .JSLOCAL extension which when run causes a MIME error as the application/javascript or text/javascript MIME type is not returned for this extension causing an error for Android and a silent fail on the iOS simulator.

[ERROR] E/TiWebChromeClient.console: (main) [56,979] Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of empty string (""). Strict MIME type checking is enforced for module scripts per HTML spec. (0:file:///android_asset/Resources/myModule.jslocal)

This error was rectified by using the ".JSF" extension.

The second issue is the nonexecution of

import XXX from '[path]/[module].jsf'

Inline execution of an ESM Module works

<script type="module">
    let p = document.getElementById('identP');
    p.innerText = 'From Module';
    window.output( "from Module" );
</script>

But when you add in an import it stops the execution

<script type="module">
    import myModule from '/myModule.jsf';
    myModule();
  
    let p = document.getElementById('identP');
    p.innerText = 'From Module';
    window.output( "from Module" );
</script>

Expected Behavior

Expected behavior is the import and execution of the ESM module being imported

Actual behavior

Silent fail, nothing output to the console or any error reported

Reproducible sample

  • Create a webview
  • Assign HTML to the HTML property with the following code in the body
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Module Programming</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>

<script>

// Ti.API.info is not available inside a Module
window.output = function( s ) {
    Ti.API.info( "Output: " + s );
}

window.addEventListener('DOMContentLoaded', () => {
   let x = document.getElementById('identP');
   let b = 'String';
   window.output( b );
});

</script>

<script type="module">
    let p = document.getElementById('identP');
    p.innerText = 'From Module';
    window.output( "from Module" );
</script>

<p id="identP">First Element</p>

</body>
</html>

This

Steps to reproduce

Use the reproducing sample and add the following to the code in the module script section

<script type="module">
    import myModule from '/myModule.jsf';
    let s = myModule();
  
    let p = document.getElementById('identP');
    p.innerText = 'From Module';
    window.output( "from Module" );
</script>

Code within myModule.jsf is:

// myModule.js
function myFunction() {
    return "FooBar";
}

module.exports = myFunction;

Platform

Android & iOS

SDK version you are using

12.0.0 GA

Alloy version you are using

None
@Fruugul Fruugul added bug needs triage This issue hasn't been reviewed by maintainers labels Jul 5, 2023
@m1ga
Copy link
Contributor

m1ga commented Jul 5, 2023

Did a quick test on Android:

import myModule from '/myModule.jsf';

does show a "can't access file" error in the chrome devtools. If I change it to ./myModule.jsf it will show:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

I've googled that and found some other SO posts about those issues. One suggestion was to use .mjs. That showed an error at first because it was missing a default export. So I ended up with myModule.mjs with

// myModule.js
function myFunction() {
  return "FooBar";
}

export default myFunction

and now I see "From Module" in my Android app.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug needs triage This issue hasn't been reviewed by maintainers
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@m1ga @Fruugul