ES6 getting "earcut is not defined" when using MeshBuilder.ExtrudePolygon

I was trying to create a small test project in ES6.

var frontWall = BABYLON.MeshBuilder.ExtrudePolygon(
  "frontWall",
  {
    shape: coordinates,
    depth: someValue,
    holes: coordinates,
    faceColors: faceColors2,
  },
  scene
);
import * as BABYLON from 'babylonjs';
import { Engine } from "@babylonjs/core/Engines/engine";
import { Scene } from "@babylonjs/core/scene";
import { Vector3,Color3,Vector4 } from "@babylonjs/core/Maths/math";
import { FreeCamera } from "@babylonjs/core/Cameras/freeCamera";
import * as earcut from "earcut";
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
import { Mesh } from "@babylonjs/core/Meshes/mesh";
import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder';
"devDependencies": {
    "@babylonjs/core": "^4.2.0",
    "@babylonjs/materials": "^4.2.0",
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "babylonjs-materials": "^4.2.0",
    "babylonjs-procedural-textures": "^4.2.0",
    "earcut": "^2.2.2",
    "gulp": "^4.0.2"
  }

I have added the required details. Let me know if any more details are required.
I am getting the below error:

Uncaught ReferenceError: earcut is not defined
at Function.e.ExtrudePolygon (main.js:2)

Try this:
import earcut from ‘earcut’

Hi @Raggar

Thanks for looking into the issue. I tried this but it didn’t worked.

You forgot to pass your earcut reference after the scene object

var frontWall = BABYLON.MeshBuilder.ExtrudePolygon(
  "frontWall",
  {
    shape: coordinates,
    depth: someValue,
    holes: coordinates,
    faceColors: faceColors2,
  },
  scene,
  earcut
);
3 Likes

Also do not mix babylonjs and @babylonjs/… as you would end up with lot of weird behaviors

1 Like

@sebavan

I was just trying to get the earcut issue fixed in some way. Thanks for the suggestion.

@Raggar

Thanks. That fixed the issue.

2 Likes