solved TypeError: Cannot set property renderingGroupId of [object Object] which has only a getter

[PhilT]

I'm having trouble using `createInstance` when importing BabylonJS as an ES6 module.
 

// <script src='main.js' type='module'></script>

import {Engine, Scene, ArcRotateCamera, Vector3,
  MeshBuilder, Color3, HemisphericLight} from './node_modules/babylonjs/es6.js'

document.addEventListener('DOMContentLoaded', () => {
  const canvas = document.getElementById('renderCanvas')
  const engine = new Engine(canvas, true)

  const scene = new Scene(engine)
  const camera = new ArcRotateCamera('camera', 1, 0.8, 10,
    new Vector3(0, 0, 0))
  camera.setPosition(new Vector3(0, 0, -100))
  scene.activeCamera.attachControl(canvas)

  const light = new HemisphericLight('', new Vector3(0, 1, 0))
  light.diffuse = new Color3(1, 1, 1)
  light.groundColor = new Color3(0.2, 0.2, 0.2)

  let mesh = MeshBuilder.CreateSphere('', {})
  mesh.createInstance('')
})

If I run the previous code I get the following error:

TypeError: Cannot set property renderingGroupId of [object Object] which has only a getter
es6.js:17243
    at InstancedMesh.AbstractMesh [as constructor] (c:\Users\phil\code\sandbox\babylonjs-test\node_modules\babylonjs\es6.js:17243:37)
    at new InstancedMesh (c:\Users\phil\code\sandbox\babylonjs-test\node_modules\babylonjs\es6.js:55221:33)
    at Mesh.createInstance (c:\Users\phil\code\sandbox\babylonjs-test\node_modules\babylonjs\es6.js:29095:21)
    at HTMLDocument.document.addEventListener (c:\Users\phil\code\sandbox\babylonjs-test\main.js:19:9)

 

Importing the library in a script tag works fine:

// <script src="https://cdn.babylonjs.com/babylon.js"></script>
// <script src='main.js'></script>

document.addEventListener('DOMContentLoaded', () => {
  const canvas = document.getElementById('renderCanvas')
  const engine = new BABYLON.Engine(canvas, true)

  const scene = new BABYLON.Scene(engine)
  const camera = new BABYLON.ArcRotateCamera('camera', 1, 0.8, 10,
    new BABYLON.Vector3(0, 0, 0))
  camera.setPosition(new BABYLON.Vector3(0, 0, -100))
  scene.activeCamera.attachControl(canvas)

  const light = new BABYLON.HemisphericLight('', new BABYLON.Vector3(0, 1, 0))
  light.diffuse = new BABYLON.Color3(1, 1, 1)
  light.groundColor = new BABYLON.Color3(0.2, 0.2, 0.2)

  let mesh = BABYLON.MeshBuilder.CreateSphere('', {})
  mesh.createInstance('')
})

 

I'd like to avoid bundlers and transpilers while developing the code and just package it up later on. 

[Guest]

pinging @RaananW

[RaananW]

The funny thing is that this is the correct behavior. Now I wonder why it works with vaniall js

The InstancedMesh class has renderingGroupId set to read only:

// in typescript:
        public get renderingGroupId(): number {
            return this._sourceMesh.renderingGroupId;
        }

//in javascript

        Object.defineProperty(InstancedMesh.prototype, "renderingGroupId", {
            get: function () {
                return this._sourceMesh.renderingGroupId;
            },
            enumerable: true,
            configurable: true
        });

I will look into that. @Deltakosh, maybe the getter here can be altered? just adding a noop setter  would solve this issue.

[RaananW]

After merging this - https://github.com/BabylonJS/Babylon.js/pull/3894 , the code you  provided compiles correctly .

[PhilT]

Just installed from master and that appears to be all working for me now. Thanks!