Problems loading babylon via es modules

Bugs
41

This ^^^^^ :slight_smile:

You would also need to import @babylonjs/core/Materials/standardMaterial if you haven’t done that already

1 Like
42

You can delete this post later to avoid promoting your competitor.

Could you create a mjs file like developers of PlayCanvas did:

    <script type="importmap">
        {
            "imports": {
                "playcanvas-mjs": "https://cdn.jsdelivr.net/npm/playcanvas@1.64.4/+esm"
            }
        }
    </script>

    <script type="module">
        import { Application } from "playcanvas-mjs";
        import { FILLMODE_FILL_WINDOW, RESOLUTION_AUTO} from "playcanvas-mjs"
        import { Entity } from "playcanvas-mjs"
        import { Color } from "playcanvas-mjs"

@yaustar replied to me in the PlayCanvas discord channel starting from this post: Discord I just copied his and my messages about my BJS example that uses unpkg and about my PlayCanvas example that I tried to use like BJS:

yaustar: It broke as soon as I started to refresh with cache disabled
me: Could you try on another playgrounds?
yaustar: I can force it to fail

image

me: I use Chome, and you?
yaustar: It doesn’t matter where you are hosting it from, unpkg is rate limiting
yaustar: Yes Chrome
me: But why does BJS work for me?
yaustar: Because it’s fewer files (380 vs 600) and you aren’t refreshing constantly with cache disabled to trigger the rate limiting from unpkg
me: But why doesn’t it work for you?
yaustar: Because I’m refreshing constantly to work out what is going on and trigger the rate limiting from unpkg
me: Perhaps the unpkg developers will solve the problem (I created this issues). Thank you very much for your time!
yaustar: I doubt it, they have the rate limit there for a reason
yaustar: Can you just use the mjs file instead of linking to all the sub files?

1 Like
43

Side note - we don’t serve our es6 packages (yet) on our CDN, so yes, an external CDN is still needed if you want to achieve this with babylon.

I have a simple example how to use importmap with self-hosted babylon packages here - RaananW/babylonjs-esm-in-browser: A simple example of how to use Babylon.js es6 packages directly in your browser. (github.com)

Oh, and:

We love our competitors! The only thing we might not like is if someone asked something about other frameworks in this forum. No need to delete the post at all :slight_smile:

1 Like
44

The issues around importing without bundling is one of the most annoying aspects of compiling with typescript. I created a post-compile helper that uses the paths mapping found in the specified tsconfig.json to automatically convert to the relative path of the file instead. It also automatically handles cases where “index” isn’t explicitly specified but implied, as well as appending .js where required. You can run a simulation (output is only to console) by running “npx @irrelon/fix-paths” in the project root to see what files are detected and what changes it would make. You can write changes via “npx @irrelon/fix-paths --write”. Various other options exist as well such as specifying the tsconfig to use etc.

I’m not sure if these issues have been solved yet or not so just commenting in case this utility could be helpful. :slight_smile:

1 Like
45

I’m not going to disagree with that! Did you try using something more standard like using a package like “tsc-alias” or node option like --experimental-specifier-resolution=node?

If you use tsc-alias then you still need to use “.js” on non-default 3rd party library imports. I have noticed there are lots of custom loaders out there in the wild - it’s a pretty pervasive problem. Especially with stuff like ts-node not being recommended for production - I think due to memory-management.

46

I went around the houses a few times on different approaches but got very frustrated by “does this but not that” and after creating the @irrelon/fix-paths npx script, I haven’t needed to worry since. It’s incidental, can be added to any build command at the end of the command to fix up paths after build, and just works.

1 Like