X_ITE fails to load additional modules from my local server when loaded as ES6 module

[gwhitney]

I am attempting to try out x_ite with some simple files on my local (http://127.0.0.1/) server. I have a webpage with exactly one <a> link to a WRL97 file; the file is also hosted on the local server. My webpage also has a <script src="js/giveAwrl.js" type="module"></script> tag, and the contents of that giveAwrl.js JavaScript module are

import "https://code.jquery.com/jquery-3.7.1.js"
import "https://create3000.github.io/code/x_ite/latest/x_ite.js"

const canvas = X3D.createBrowser()
const site = $('a[href^="http"]')
canvas.setAttribute('src', site.attr('href'))
site.after(canvas)

(I am just trying to insert an in-line viewer right after the link.)

However, the above code fails when I load the page, with the following errors:

🚫 GET http://127.0.0.1:8080/assets/components/Scripting.js
🚫 GET http://127.0.0.1:8080/assets/components/Text.js

Naturally, I don't have these two JavaScript files on my server, and I don't understand why x_ite is looking for them locally rather than back at create3000.github.io. Sorry if this is an uninformed question, but was there some X3D call I was supposed to make to tell it where to get its submodules? Thanks for any guidance.

[gwhitney]

I have found a workaround that leads to my .wrl file displaying correctly:

import "https://code.jquery.com/jquery-3.7.1.js"

jQuery.getScript('https://create3000.github.io/code/x_ite/latest/x_ite.js', () => {
   const canvas = X3D.createBrowser()
   const site = $('a[href^="http"]')
   canvas.setAttribute('src', site.attr('href'))
   return site.after(canvas)
})

but still it would be ideal if x_ite.js did not become confused about the location of its assets when it is (es6) imported. Thanks for confirming the issue and any future progress you make on resolving it.

[create3000]

Unfortunately X_ITE is not yet made to be loaded via ES6 import statement, so as a module. The recommended way to include it is via the script element and that is also, I believe, what jQuery does.

<script src="https://create3000.github.io/code/x_ite/latest/x_ite.min.js"></script>

[create3000]

With new version, probably released on Sunday, this will be possible:

import "https://code.jquery.com/jquery-3.7.1.js";
import X3D from "https://create3000.github.io/code/x_ite/latest/x_ite.mjs";

const
   canvas  = X3D .createBrowser (),
   browser = canvas .browser;

$("body")
   .append (canvas)
   .append ($("<p></p>") .text ("X_ITE loaded as JavaScript module."));

browser .loadURL (new X3D .MFString ("https://create3000.github.io/media/examples/Geometry2D/Disk2D/Disk2D.x3d"));

Please note: the extension of the imported x_ite file is .mjs.

[gwhitney]

Terrific, looking forward to it, thanks.

[create3000]

Have right now released a new version 8.12.0 with ES module support.

[gwhitney]

Works for me :)