webpack 5 compat fixes (support type: "module")

- fully specified module imports
- process replaced in build

package.json

@@ -117,6 +117,7 @@
     "react-dom": ">=17"
   },
   "dependencies": {
+    "@rollup/plugin-replace": "^3.0.0",
     "react-reconciler": "^0.26.1"
   }
 }

rollup.config.js

@@ -1,4 +1,5 @@
 import json from '@rollup/plugin-json';
+import replace from '@rollup/plugin-replace';
 import typescript from 'rollup-plugin-typescript2';
 
 const pkg = require('./package.json')
@@ -30,6 +31,10 @@ export default (async () => {
     plugins: [
       json(),
       typescript(),
+      replace({
+        preventAssignment: true,
+        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+      }),
       // minimize production build
       isProduction && (await import('rollup-plugin-terser')).terser()
     ]

src/CreatedInstance.ts

@@ -1,8 +1,9 @@
-import { Observer } from "@babylonjs/core/Misc/observable"
-import { Nullable } from "@babylonjs/core/types";
+import { Observer } from "@babylonjs/core/Misc/observable.js";
+import { Nullable } from "@babylonjs/core/types.js";
+
 import { AnyCustomProps, CustomProps } from "./CustomProps";
-import { LifecycleListener } from "./LifecycleListener"
-import { HasPropsHandlers } from "./PropsHandler"
+import { LifecycleListener } from "./LifecycleListener";
+import { HasPropsHandlers } from "./PropsHandler";
 
 export interface InstanceMetadataParameter {
   delayCreation?: boolean // if it should not be created automatically, but by LifecycleListener (ie: ShadowGenerator needs an IShadowLight)
@@ -23,7 +24,6 @@ export interface InstanceMetadataParameter {
   isEffectLayer?: boolean;
   isGlowLayer?: boolean;
   isBehavior?: boolean;
-
 }
 
 export interface CreatedInstanceMetadata extends InstanceMetadataParameter {

src/Engine.tsx

@@ -1,11 +1,8 @@
-import React from 'react'
-import {
-  Nullable,
-  Engine,
-  EngineOptions,
-  ThinEngine,
-  Observable,
-} from '@babylonjs/core'
+import React from 'react';
+import { Nullable } from '@babylonjs/core/types.js';
+import { Engine } from '@babylonjs/core/Engines/engine.js';
+import { Observable } from '@babylonjs/core/Misc/observable.js';
+import { EngineOptions, ThinEngine } from '@babylonjs/core/Engines/thinEngine.js';
 
 import { EngineCanvasContextType, EngineCanvasContext } from './hooks/engine';
 

src/HostRegistrationStore.ts

@@ -1,4 +1,5 @@
-import { Scene } from "@babylonjs/core";
+import { Scene } from "@babylonjs/core/scene.js";
+
 import { CreateInfo } from "./codeGenerationDescriptors";
 import { CreatedInstanceMetadata } from "./CreatedInstance";
 import { HasPropsHandlers } from "./PropsHandler";

src/LifecycleListener.ts

@@ -1,5 +1,6 @@
+import { Scene } from "@babylonjs/core/scene.js";
+
 import { CreatedInstance } from "./CreatedInstance"
-import { Scene } from "@babylonjs/core"
 
 export interface LifecycleListener<T> {
   onCreated?: (instance: CreatedInstance<T>, scene: Scene) => void

src/PropsHandler.ts

@@ -1,6 +1,12 @@
-import { Vector3, Color3, Color4, Quaternion } from '@babylonjs/core/Maths/math'
-import { Control } from '@babylonjs/gui/2D/controls/control'
-import { Observable, FresnelParameters, BaseTexture, Nullable } from '@babylonjs/core'
+import { FresnelParameters } from '@babylonjs/core/Materials/fresnelParameters.js';
+import { BaseTexture } from '@babylonjs/core/Materials/Textures/baseTexture.js';
+import { Color4 } from '@babylonjs/core/Maths/math.color.js';
+import { Color3 } from '@babylonjs/core/Maths/math.color.js';
+import { Quaternion, Vector3 } from '@babylonjs/core/Maths/math.vector.js';
+
+import { Observable } from '@babylonjs/core/Misc/observable.js';
+import { Nullable } from '@babylonjs/core/types.js';
+import { Control } from '@babylonjs/gui/2D/controls/control.js'
 
 export interface PropertyUpdate {
   value: any

src/ReactBabylonJSHostConfig.ts

@@ -1,5 +1,10 @@
 import ReactReconciler, { HostConfig } from 'react-reconciler';
-import { Scene, Nullable, Node, InspectableType, IInspectable } from '@babylonjs/core';
+
+import { IInspectable, InspectableType } from '@babylonjs/core/Misc/iInspectable.js';
+import { Nullable } from '@babylonjs/core/types.js';
+import { Scene } from '@babylonjs/core/scene.js';
+import { Node } from '@babylonjs/core/node.js';
+
 import * as BABYLONEXT from './extensions';
 import * as GENERATED from './generatedCode';
 import * as CUSTOM_HOSTS from './customHosts';

src/Scene.tsx

@@ -1,13 +1,10 @@
 import React, { useContext, useEffect, useRef, useState, MutableRefObject } from 'react';
-import {
-  AbstractMesh,
-  Nullable,
-  Observer,
-  PointerEventTypes,
-  PointerInfo,
-  Scene as BabylonJSScene,
-  SceneOptions
-} from '@babylonjs/core';
+
+import { Scene as BabylonScene, SceneOptions } from '@babylonjs/core/scene.js';
+import { PointerEventTypes, PointerInfo } from '@babylonjs/core/Events/pointerEvents.js';
+import { AbstractMesh } from '@babylonjs/core/Meshes/abstractMesh.js';
+import { Nullable } from '@babylonjs/core/types.js';
+import { Observer } from '@babylonjs/core/Misc/observable.js';
 
 import { EngineCanvasContextType, EngineCanvasContext, withEngineCanvasContext } from './hooks/engine';
 import { SceneContext } from './hooks/scene';
@@ -20,22 +17,22 @@ import { Container } from './ReactBabylonJSHostConfig';
 import { CreatedInstance } from './CreatedInstance';
 
 export declare type SceneEventArgs = {
-  scene: BabylonJSScene;
+  scene: BabylonScene;
   canvas: HTMLCanvasElement;
 };
 
 type SceneProps = {
   engineCanvasContext: EngineCanvasContextType
-  onMeshPicked?: (mesh: AbstractMesh, scene: BabylonJSScene) => void
-  onScenePointerDown?: (evt: PointerInfo, scene: BabylonJSScene) => void
-  onScenePointerUp?: (evt: PointerInfo, scene: BabylonJSScene) => void
-  onScenePointerMove?: (evt: PointerInfo, scene: BabylonJSScene) => void
+  onMeshPicked?: (mesh: AbstractMesh, scene: BabylonScene) => void
+  onScenePointerDown?: (evt: PointerInfo, scene: BabylonScene) => void
+  onScenePointerUp?: (evt: PointerInfo, scene: BabylonScene) => void
+  onScenePointerMove?: (evt: PointerInfo, scene: BabylonScene) => void
   onSceneMount?: (sceneEventArgs: SceneEventArgs) => void
   children: any,
   sceneOptions?: SceneOptions
 } & FiberSceneProps
 
-const updateScene = (props: SceneProps, prevPropsRef: MutableRefObject<Partial<SceneProps>>, scene: CreatedInstance<BabylonJSScene>, propsHandler: FiberScenePropsHandler) => {
+const updateScene = (props: SceneProps, prevPropsRef: MutableRefObject<Partial<SceneProps>>, scene: CreatedInstance<BabylonScene>, propsHandler: FiberScenePropsHandler) => {
   const prevProps = prevPropsRef.current;
   const updates: UpdatePayload = propsHandler.getPropertyUpdates(prevProps, props);
 
@@ -52,7 +49,7 @@ const Scene: React.FC<SceneProps> = (props: SceneProps, context?: any) => {
 
   const [propsHandler] = useState(new FiberScenePropsHandler());
   const [sceneReady, setSceneReady] = useState(false);
-  const [scene, setScene] = useState<Nullable<BabylonJSScene>>(null)
+  const [scene, setScene] = useState<Nullable<BabylonScene>>(null)
 
   // TODO: make this strongly typed
   const reconcilerRef = useRef<Nullable<ReconcilerInstance>>(null);
@@ -62,7 +59,7 @@ const Scene: React.FC<SceneProps> = (props: SceneProps, context?: any) => {
 
   // initialize babylon scene
   useEffect(() => {
-    const scene = new BabylonJSScene(engine!, props.sceneOptions)
+    const scene = new BabylonScene(engine!, props.sceneOptions)
     // const onReadyObservable: Nullable<Observer<BabylonJSScene>> = scene.onReadyObservable.add(onSceneReady);
     const sceneIsReady = scene.isReady();
     if (sceneIsReady) {

src/UpdateInstance.ts

@@ -1,8 +1,8 @@
 import { PropertyUpdate, PropsHandler, PropChangeType } from './PropsHandler';
 import { CreatedInstance } from './CreatedInstance';
-import { Observable, Observer } from '@babylonjs/core/Misc/observable';
-import { Nullable } from '@babylonjs/core/types';
-import { Quaternion, Vector3 } from '@babylonjs/core/Maths/math.vector';
+import { Observable, Observer } from '@babylonjs/core/Misc/observable.js';
+import { Nullable } from '@babylonjs/core/types.js';
+import { Quaternion, Vector3 } from '@babylonjs/core/Maths/math.vector.js';
 
 export const applyUpdateToInstance = (createdInstance: CreatedInstance<any>, update: PropertyUpdate): void => {
   let target = update.target !== undefined ? createdInstance.hostInstance[update.target] : createdInstance.hostInstance;

src/customComponents/Model.tsx

@@ -1,5 +1,7 @@
-import { AbstractMesh, ISceneLoaderProgressEvent } from "@babylonjs/core";
+import { ISceneLoaderProgressEvent } from "@babylonjs/core/Loading/sceneLoader.js";
+import { AbstractMesh } from "@babylonjs/core/Meshes/abstractMesh.js";
 import React, { useEffect } from "react"
+
 import { FiberAbstractMeshProps, FiberAbstractMeshPropsCtor } from "../generatedProps";
 import { ILoadedModel } from "../hooks/loaders/loadedModel";
 

src/customComponents/Skybox.tsx

@@ -1,5 +1,5 @@
-import React from "react"
-import { Texture } from "@babylonjs/core/Materials/Textures"
+import { Texture } from "@babylonjs/core/Materials/Textures/texture.js";
+import React from "react";
 
 interface SkyboxProps {
   rootUrl: string

src/customHosts/AbstractMeshLifecycleListener.ts

@@ -1,6 +1,6 @@
-import { Mesh } from '@babylonjs/core';
-import { GlowLayer } from '@babylonjs/core/Layers/glowLayer';
-import { AbstractMesh } from '@babylonjs/core/Meshes/abstractMesh';
+import { GlowLayer } from '@babylonjs/core/Layers/glowLayer.js';
+import { AbstractMesh } from '@babylonjs/core/Meshes/abstractMesh.js';
+import { Mesh } from '@babylonjs/core/Meshes/mesh.js';
 
 import { CreatedInstance } from '../CreatedInstance';
 import { FiberAbstractMeshProps } from '../generatedProps';

src/customHosts/AdvancedDynamicTextureLifecycleListener.ts

@@ -1,5 +1,8 @@
-import { Color3, StandardMaterial, Mesh } from '@babylonjs/core';
-import { AdvancedDynamicTexture } from '@babylonjs/gui/2D/advancedDynamicTexture';
+
+import { AdvancedDynamicTexture } from '@babylonjs/gui/2D/advancedDynamicTexture.js';
+import { Mesh } from '@babylonjs/core/Meshes/mesh.js';
+import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial.js';
+import { Color3 } from '@babylonjs/core/Maths/math.color.js';
 
 import BaseLifecycleListener from './BaseLifecycleListener';
 import { ADTCustomProps, VirtualKeyboardCustomProps } from '../CustomProps';

src/customHosts/BaseLifecycleListener.ts

@@ -1,4 +1,6 @@
-import { Scene } from '@babylonjs/core';
+
+import { Scene } from '@babylonjs/core/scene.js';
+
 import { CreatedInstance } from '../CreatedInstance';
 import { LifecycleListener } from '../LifecycleListener';
 import { applyInitialPropsToCreatedInstance } from '../UpdateInstance';

src/customHosts/BaseShadowGeneratorLifecycleListener.ts

@@ -1,4 +1,9 @@
-import { Scene, AbstractMesh, Observer, Nullable, DirectionalLight, ShadowGenerator } from '@babylonjs/core';
+import { DirectionalLight } from '@babylonjs/core/Lights/directionalLight.js';
+import { ShadowGenerator } from '@babylonjs/core/Lights/Shadows/shadowGenerator.js';
+import { AbstractMesh } from '@babylonjs/core/Meshes/abstractMesh.js';
+import { Observer } from '@babylonjs/core/Misc/observable.js';
+import { Scene } from '@babylonjs/core/scene.js';
+import { Nullable } from '@babylonjs/core/types.js';
 
 import { CreatedInstance } from '../CreatedInstance';
 import { ShadowGeneratorCustomProps } from '../CustomProps';

src/customHosts/BehaviorsLifecycleListener.ts

@@ -1,4 +1,8 @@
-import {Behavior, IBehaviorAware, Nullable} from '@babylonjs/core';
+
+
+import { IBehaviorAware } from '@babylonjs/core/Behaviors/behavior.js';
+import { Behavior } from '@babylonjs/core/Behaviors/behavior.js';
+import { Nullable } from '@babylonjs/core/types.js';
 
 import { CreatedInstance } from '../CreatedInstance';
 import BaseLifecycleListener from './BaseLifecycleListener';

src/customHosts/CameraLifecycleListener.ts

@@ -1,7 +1,7 @@
-import { Camera } from '@babylonjs/core'
+import { Camera } from '@babylonjs/core/Cameras/camera.js';
 
-import BaseLifecycleListener from './BaseLifecycleListener'
-import { CreatedInstance } from '../CreatedInstance'
+import BaseLifecycleListener from './BaseLifecycleListener';
+import { CreatedInstance } from '../CreatedInstance';
 
 export default class CameraLifecycleListener extends BaseLifecycleListener<Camera, any> {
 

src/customHosts/CascadedShadowGeneratorLifecycleListener.ts

@@ -1,4 +1,7 @@
-import { CascadedShadowGenerator, DirectionalLight } from '@babylonjs/core';
+
+import { DirectionalLight } from '@babylonjs/core/Lights/directionalLight.js';
+import { CascadedShadowGenerator } from '@babylonjs/core/Lights/Shadows/cascadedShadowGenerator.js';
+
 import BaseShadowGeneratorLifecycleListener from './BaseShadowGeneratorLifecycleListener';
 
 export default class CascadedShadowGeneratorLifecycleListener extends BaseShadowGeneratorLifecycleListener<CascadedShadowGenerator, any> {

src/customHosts/EngineViewLifecycleListener.ts

@@ -1,6 +1,7 @@
-import { EngineView } from '@babylonjs/core/Engines/Extensions/engine.views';
-import { Scene } from '@babylonjs/core/scene';
-import { Nullable } from '@babylonjs/core/types';
+import { EngineView } from '@babylonjs/core/Engines/Extensions/engine.views.js';
+import { Scene } from '@babylonjs/core/scene.js';
+import { Nullable } from '@babylonjs/core/types.js';
+
 import { CreatedInstance } from '../CreatedInstance';
 import DeferredCreationLifecycleListener from './DeferredCreationLifecycleListener';
 

src/customHosts/EnvironmentHelperLifecycleListener.ts

@@ -1,4 +1,6 @@
-import { EnvironmentHelper } from '@babylonjs/core'
+
+import { EnvironmentHelper } from '@babylonjs/core/Helpers/environmentHelper.js';
+
 import { CreatedInstance } from '../CreatedInstance'
 import BaseLifecycleListener from './BaseLifecycleListener'
 

src/customHosts/GUI2DControlLifecycleListener.ts

@@ -1,5 +1,5 @@
-import { Control } from '@babylonjs/gui/2D/controls/control';
-import { VirtualKeyboard } from '@babylonjs/gui/2D/controls/virtualKeyboard';
+import { Control } from '@babylonjs/gui/2D/controls/control.js';
+import { VirtualKeyboard } from '@babylonjs/gui/2D/controls/virtualKeyboard.js';
 
 import BaseLifecycleListener from './BaseLifecycleListener';
 import { CreatedInstance } from '../CreatedInstance';

src/customHosts/GUI3DControlLifecycleListener.ts

@@ -1,8 +1,10 @@
-import { AbstractMesh, Nullable } from '@babylonjs/core'
-import { Control3D } from '@babylonjs/gui/3D/controls/control3D'
 
-import BaseLifecycleListener from './BaseLifecycleListener'
-import { CreatedInstance } from '../CreatedInstance'
+import { Control3D } from '@babylonjs/gui/3D/controls/control3D.js';
+import { Nullable } from '@babylonjs/core/types.js';
+import { AbstractMesh } from '@babylonjs/core/Meshes/abstractMesh.js';
+
+import BaseLifecycleListener from './BaseLifecycleListener';
+import { CreatedInstance } from '../CreatedInstance';
 import { Control3DCustomProps } from '../CustomProps';
 
 export default class GUI3DControlLifecycleListener extends BaseLifecycleListener<Control3D, any> {

src/customHosts/GUI3DManagerLifecycleListener.ts

@@ -1,7 +1,9 @@
+import { AbstractMesh } from '@babylonjs/core/Meshes/abstractMesh.js';
+import { Nullable } from '@babylonjs/core/types.js';
+import { GUI3DManager } from '@babylonjs/gui/3D/gui3DManager.js';
+
 import { CreatedInstance } from '../CreatedInstance';
 import { Control3DCustomProps } from '../CustomProps';
-import { AbstractMesh, Nullable } from '@babylonjs/core';
-import { GUI3DManager } from '@babylonjs/gui/3D/gui3DManager';
 import BaseLifecycleListener from './BaseLifecycleListener';
 
 export default class GUI3DManagerLifecycleListener extends BaseLifecycleListener<GUI3DManager, any> {

src/customHosts/MaterialsLifecycleListener.ts

@@ -1,5 +1,6 @@
-import { Scene, AbstractMesh } from '@babylonjs/core';
-import { Material } from '@babylonjs/core/Materials';
+import { Material } from '@babylonjs/core/Materials/material.js';
+import { Scene } from '@babylonjs/core/scene.js';
+import { AbstractMesh } from '@babylonjs/core/Meshes/abstractMesh.js';
 
 import BaseLifecycleListener from './BaseLifecycleListener';
 import { CreatedInstance } from '../CreatedInstance';

src/customHosts/PhysicsImpostorLifecycleListener.ts

@@ -1,4 +1,8 @@
-import { IPhysicsEnabledObject, Nullable, Scene, PhysicsImpostor, PhysicsImpostorParameters } from '@babylonjs/core';
+
+
+import { IPhysicsEnabledObject, PhysicsImpostor, PhysicsImpostorParameters } from '@babylonjs/core/Physics/physicsImpostor.js';
+import { Scene } from '@babylonjs/core/scene.js';
+import { Nullable } from '@babylonjs/core/types.js';
 
 import { CreatedInstance } from '../CreatedInstance';
 import DeferredCreationLifecycleListener from './DeferredCreationLifecycleListener';

src/customHosts/ShadowGeneratorLifecycleListener.ts

@@ -1,4 +1,7 @@
-import { ShadowGenerator, DirectionalLight } from '@babylonjs/core';
+
+import { DirectionalLight } from '@babylonjs/core/Lights/directionalLight.js';
+import { ShadowGenerator } from '@babylonjs/core/Lights/Shadows/shadowGenerator.js';
+
 import BaseShadowGeneratorLifecycleListener from './BaseShadowGeneratorLifecycleListener';
 
 export default class ShadowGeneratorLifecycleListener extends BaseShadowGeneratorLifecycleListener<ShadowGenerator, any> {

src/customHosts/TargetPropsHandler.ts

@@ -1,4 +1,6 @@
-import { Scene } from '@babylonjs/core';
+
+import { Scene } from '@babylonjs/core/scene.js';
+
 import { UpdatePayload, PropertyUpdate, PropsHandler, PropChangeType } from '../PropsHandler';
 
 // This does not work when declared component with 'lockedTargetMeshName' is before the mesh with that name.

src/customHosts/TexturesLifecycleListener.ts

@@ -1,4 +1,4 @@
-import { Texture } from '@babylonjs/core';
+import { Texture } from '@babylonjs/core/Materials/Textures/texture.js';
 
 import { CreatedInstance } from '../CreatedInstance';
 import { assignProperty } from '../helper/property';

src/customHosts/VRExperienceHelperLifecycleListener.ts

@@ -1,10 +1,13 @@
-import { VRExperienceHelper } from '@babylonjs/core';
+import { VRExperienceHelper } from '@babylonjs/core/Cameras/VR/vrExperienceHelper.js';
 
 import { CreatedInstance } from '../CreatedInstance';
 import { VRExperienceHelperCustomProps } from '../CustomProps';
 import BaseLifecycleListener from './BaseLifecycleListener';
 import { FiberVRExperienceHelperProps } from '../generatedProps';
 
+/**
+ * This should be replaced entirely with XR version.
+ */
 export default class VRExperienceHelperLifecycleListener extends BaseLifecycleListener<VRExperienceHelper, FiberVRExperienceHelperProps> {
 
   onMount(instance: CreatedInstance<VRExperienceHelper>): void {

src/customHosts/ViewportLifecycleListener.ts

@@ -1,9 +1,10 @@
+import { Viewport } from '@babylonjs/core/Maths/math.viewport.js';
+import { Camera } from '@babylonjs/core/Cameras/camera.js';
+
 import BaseLifecycleListener from './BaseLifecycleListener';
 import { CreatedInstance } from '../CreatedInstance';
 import { assignProperty } from '../helper/property';
 import { FiberViewportProps } from '../generatedProps';
-import { Viewport } from '@babylonjs/core/Maths/math.viewport';
-import { Camera } from '@babylonjs/core/Cameras/camera';
 
 export default class ViewportLifecycleListener extends BaseLifecycleListener<Viewport, FiberViewportProps> {
   onMount(instance?: CreatedInstance<Viewport>) {