0

I am trying to make a single page website for which I need a 3d rendering engine. But I keep getting the error:

The requested module '/Babylon.js-master/dist/babylon.js' does not provide an export named 'Engine'

HTML

<!DOCTYPE html>
<html lang="en">

 <head>
<title>Gcode Designer</title>
<link href="stylesheet.css" rel="stylesheet">
<script src="Main.js"> </script>
<style type="text/css" media="screen">
 
</style>
<script src="plotly-2.1.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
</head>

<body>
<p>hello</p>
<canvas id="renderCanvas"></canvas>
<script type="module"  src="http://127.0.0.1:5500/gcodeViewerBabylon.js"></script>
</body>

Javascript

import { Scene, Engine } from '/Babylon.js-master/dist/babylon.js';

var canvas = document.getElementById('renderCanvas');
// Load the 3D engine
var engine = new Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
//Some More code

Things I have already tried:

  1. Trying an installing from npm and trying to import. that doesn't work at all, gives the error "Failed to resolve module specifier "babylonjs". Relative references must start with either "/", "./", or "../"."
  2. Trying a CDN

Both of those approaches did not work. I am washing exactly the same problems with another library. I am new web development, actually my first project. Maybe I am making some very fundamental mistake.

At the same time I imported three.js the same way and it worked beautifully.

Thanks for any help in advance.

Vipul Rajan
  • 494
  • 1
  • 5
  • 16

1 Answers1

0

If '/Babylon.js-master/dist/babylon.js' is stored in relation to this script then it should be './Babylon.js-master/dist/babylon.js' and if not local then it should be the full https... BUT that likely would not fix your issue because that module doesn't not look like the "./babylon/core" module that you need to actually export engine and scene from.

You already referenced the babylonjs core in your html so you should be able to just change it to this

var canvas = document.getElementById('renderCanvas');
// Load the 3D engine
var engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
var scene = new BABYLON.Scene(engine)

Also if you really want to use modules you might be able to change script type to module like in the example below, but I'm not familiar with that route https://stackoverflow.com/a/34607405/12654186

Refs https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules https://v8.dev/features/modules#mjs

Lay84
  • 1
  • 1