How to import babylon.js in js code file?

Questions
1

I’m just starting to learn js and immediately decided to do babylon, downloaded via npm, but how to import it? I looked at the documentation, I also do nothing, it says in the browser console that “Uncaught SyntaxError: Cannot use import statement outside a module (at script.js:1:1)”. This is how I do it: import * as BABYLON from “babylonjs/babylon.js”. I write in vs code.
image

2

Hi @kalashnikovjan123 and welcome to the forum

import is Typescript. To load babylon.js from a .html :

Or, easier, you can use this template to use babylon.js with typescript:

It’s really easy to use.

1 Like
3

Maybe this doc page will help?

4

To solve the error, set the type attribute to module when loading the script in your HTML code. When working with ECMAScript modules and JavaScript module import statements in the browser, you’ll need to explicitly tell the browser that a script is module. To do this, you have to add type=“module” onto any ‹script› tags that point to a JavaScript module. Once you do this you can import that module without issues.

<script type="module" src="./index.js"></script>

If you are working on Node.js or react applications and using import statements instead of require to load the modules, then ensure your package.json has a property “type”: “module” as shown below.

{
  // ...
  "type": "module",
  // ...
}

Moreover, In some cases, you may have to use both import and require statements to load the module properly.

// import { parse } from 'node-html-parser';
parse = require('node-html-parser');

This error "Cannot use import statement outside a module " can happen in different cases depending on whether you’re working with JavaScript on the server-side with Node.js , or client-side in the browser. There are several reasons behind this error, and the solution depends on how you call the module or script tag.

5

Sorry, but I have to add a side note to your comment - it can be very confusing to do things the way you show and explain to be honest.

There are a few ways to consume babylon. UMD, ES6, in-browser and using npm/bundler.

UMD In browser - use script tags to load babylon from a CDN, similar to the way a playground is being downloaded from the playground.

UMD using npm/bundler - depending on the bundler and the language, you will need to wither require or import the entire namespace from "babylonjs" and use it just like you would when using the BABYLON namespace when using the CDN in a script tag.

ES6 in browser - I have just built an example on how to achieve this - RaananW/babylonjs-esm-in-browser: A simple example of how to use Babylon.js es6 packages directly in your browser. (github.com). The idea - use import from a specific URL to load the right files. This is the most modern and most complext option (at the moment! I do hope that soon this will be the default method).

ES6 using npm/bundler - Here is an example project for that - RaananW/babylonjs-webpack-es6: Babylon.js basic scene with typescript, webpack, es6 modules, editorconfig, eslint, hot loading and more. Will even make coffee if you ask nicely. (github.com). The idea - import or require from the @babylonjs/??? packages.

This is just the tip of the iceberg. If you want simplicity - in browser UMD is the simplest. If you want to be dynamic and cutting edge - es6 in browser (or using a bundler) is the right way to go. If anyone has questions about build, bundling, please don’t hesitate to let us know.

1 Like