I created the issue: Uncaught StandardMaterial needs to be imported before as it contains a side-effect required by your code · Issue #14034 · BabylonJS/Babylon.js · GitHub
The minimal example demonstrating the problem. Error message: Uncaught StandardMaterial needs to be imported before as it contains a side-effect required by your code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>
<canvas id="renderCanvas" width="400" height="400"></canvas>
<!-- Since import maps are not yet supported by all browsers, its is
necessary to add the polyfill es-module-shims.js -->
<script async src="https://unpkg.com/es-module-shims@1.7.3/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"@babylonjs/core": "https://unpkg.com/@babylonjs/core@6.11.1",
"@babylonjs/core/": "https://unpkg.com/@babylonjs/core@6.11.1/"
}
}
</script>
<script type="module">
import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera.js";
import { Engine } from "@babylonjs/core/Engines/engine.js";
import { MeshBuilder } from "@babylonjs/core/Meshes/meshBuilder.js";
import { Scene } from "@babylonjs/core/scene.js";
import { Vector3 } from "@babylonjs/core/Maths/math.vector.js";
const canvas = document.getElementById("renderCanvas");
const engine = new Engine(canvas, true);
const scene = new Scene(engine);
const sphere = MeshBuilder.CreateSphere("Sphere", { diameter: 2, segments: 32 }, scene);
const camera = new ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 2.5, 15, new Vector3(0, 0, 0), scene);
camera.setTarget(Vector3.Zero());
camera.attachControl(canvas, true);
engine.runRenderLoop(() => {
scene.render();
});
</script>
</body>
</html>
Added
I’m sorry. That’s my fault. I had to import:
import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial.js";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>
<ul>
<li><a href="https://github.com/BabylonJS/Babylon.js/issues/14034">Issue</a>
<li><a href="https://forum.babylonjs.com/t/problems-loading-babylon-via-es-modules/2031/39?u=8observer8">Topic</a>
</ul>
<br>
<br>
<canvas id="renderCanvas" width="400" height="400"></canvas>
<!-- Since import maps are not yet supported by all browsers, its is
necessary to add the polyfill es-module-shims.js -->
<script async src="https://unpkg.com/es-module-shims@1.7.3/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"@babylonjs/core": "https://unpkg.com/@babylonjs/core@6.11.1",
"@babylonjs/core/": "https://unpkg.com/@babylonjs/core@6.11.1/"
}
}
</script>
<script type="module">
import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera.js";
import { Engine } from "@babylonjs/core/Engines/engine.js";
import { MeshBuilder } from "@babylonjs/core/Meshes/meshBuilder.js";
import { Scene } from "@babylonjs/core/scene.js";
import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial.js";
import { Vector3 } from "@babylonjs/core/Maths/math.vector.js";
const canvas = document.getElementById("renderCanvas");
const engine = new Engine(canvas, true);
const scene = new Scene(engine);
const sphere = MeshBuilder.CreateSphere("Sphere", { diameter: 2, segments: 32 }, scene);
const camera = new ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 2.5, 15, new Vector3(0, 0, 0), scene);
camera.setTarget(Vector3.Zero());
camera.attachControl(canvas, true);
engine.runRenderLoop(() => {
scene.render();
});
</script>
</body>
</html>
) will work without any trouble in the project that already has 
and I don’t know if you (Raanan) are interested in enabling this feature for the 
