Is it possible to do a namespace import?

Community Help
1

I tried importing in an OJS cell with

import * as BABYLON from "babylonjs@6";

but it didn’t seem to work. I get the error,

 OJS Syntax Error (line 16, column 8)Unexpected token

and a red squiggle under the * symbol, so clearly something doesn’t like the star. On the other hand BABYLON = require("babylonjs@6") does work. But from this page:

OJS supports imports, but none of the examples show a use of *.

It’s not a big deal, but I thought I had heard that modern JS recommends sticking to import syntax for whatever reason. I could totally have that wrong, I’m not much of a developer. But I’m wondering if what I’m trying to do is possible/easy/recommended, and what the recommendation is here.

Thanks!

2

Observable only supports dynamic imports, as the static import syntax is reserved for notebook modules (that is, cells imported from other notebooks).

Additionally you need to use a bundling service like skypack, jsdelivr or esm.sh. I recommend esm.sh as it lets you specify the dependencies or even create your own bundle on the fly, something you may need for the other question that you posted. Check out their docs for more details.

You can import BabylonJS with

BABYLON = (await import("https://esm.sh/babylonjs@6")).default
1 Like
3

I’m actually wondering if this isn’t causing an exception. I wrote the following:

BABYLON = (await import("https://esm.sh/babylonjs@6")).default;
LIB = import("https://esm.sh/babylon-helper-lib@0.0.16");

const canvas = document.getElementById("#canvas1");
const engine = new BABYLON.Engine(canvas, true);
const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.ArcRotateCamera('camera', .1,.1,5, new BABYLON.Zero(), scene);

engine.runRenderLoop( () => {
    scene.render();
})

in a cell, and it’s complaining about LIB being an unexpected token. When I remove the BabylonJS import and the Babylon code (i.e. just import babylon-helper-lib) it works. I am probably doing something stupid but can’t tell what.

4

Looks like you’re missing two const and a second await:

const BABYLON = (await import("https://esm.sh/babylonjs@6")).default;
const LIB = await import("https://esm.sh/babylon-helper-lib@0.0.16");

The Observable Runtime automatically resolves promises for you, but only if they are returned as the cell value.

I recommend to also read through Observable JavaScript / Observable | Observable

5

My apologies, but I tried this and it still gives an error.

image
image3235×1415 302 KB

I also tried removing the white space on the first line and get the same error.

I did give the intro document a read-through but I couldn’t see how to use the info to resolve these issues. I’m guessing there is something to do with this section:

Named cells look like, and function almost like, assignment expressions in vanilla JavaScript. But cells can be defined in any order, so think of them as hoisted function declarations.

But I’m not sure how to use this information to implement a fix. As a bit of a guess, I just wrapped the whole thing in curlies, hoping maybe it wouldn’t get read a named cell. That does indeed change the nature of the error, but then I don’t understand the new error message either.

image
image1449×620 66.9 KB

This seems like maybe an error originating from BabylonJS. But if I run the equivalent script in pure JS then I don’t get this error.

[Edit: I’m just now noticing the absence of the await in the second image, but including it doesn’t resolve the issue either.]

6

Sorry, I just realized what stupid mistake I was making there. I copied the code from a project and tried to “minify” it in the ObservableJS workspace. But I only just realized it’s referring to a canvas element with ID canvas1 which I didn’t copy over.