Error when switching to XR mode when importing modules individually

Questions
1

If I import Babylon core as
import * as BABYLON from '@babylonjs/core';

everything works ok, unfortunately importing just some modules using:

// General babylon imports

var BABYLON = {};

import { Engine } from '@babylonjs/core/Engines/engine';

import { Scene } from '@babylonjs/core/scene';

import { Mesh } from '@babylonjs/core/Meshes/mesh';

import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder';

import { TransformNode } from '@babylonjs/core/Meshes/transformNode';

import { SmartArray } from '@babylonjs/core/Misc/smartArray';

BABYLON.Engine = Engine;

BABYLON.Scene = Scene;

BABYLON.Mesh = Mesh;

BABYLON.MeshBuilder = MeshBuilder;

BABYLON.TransformNode = TransformNode;

BABYLON.SmartArray = SmartArray;

// Cameras

import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera';

BABYLON.ArcRotateCamera = ArcRotateCamera;

// Materials and textures

import { PBRMaterial } from '@babylonjs/core/Materials/PBR/pbrMaterial';

import { Texture } from '@babylonjs/core/Materials/Textures/texture';

import { CubeTexture } from '@babylonjs/core/Materials/Textures/cubeTexture';

import { VideoTexture } from '@babylonjs/core/Materials/Textures/videoTexture';

BABYLON.PBRMaterial = PBRMaterial;

BABYLON.Texture = Texture;

BABYLON.CubeTexture = CubeTexture;

BABYLON.VideoTexture = VideoTexture;

// Shadow generator

import { ShadowGenerator } from '@babylonjs/core/Lights/Shadows/shadowGenerator';

BABYLON.ShadowGenerator = ShadowGenerator;

// Some Specifics

import { Vector3 } from '@babylonjs/core/Maths/math.vector';

import { Quaternion } from '@babylonjs/core/Maths/math.vector';

import { Color3 } from '@babylonjs/core/Maths/math.color';

import { VertexData } from '@babylonjs/core/Meshes/mesh.vertexData';

BABYLON.Vector3 = Vector3;

BABYLON.Quaternion = Quaternion;

BABYLON.Color3 = Color3;

BABYLON.VertexData = VertexData;

// WebXR Specifics

import { WebXRSessionManager } from '@babylonjs/core/XR/webXRSessionManager';

import { WebXRBackgroundRemover } from '@babylonjs/core/XR/Features/WebXRBackgroundRemover';

import { WebXRExperienceHelper } from '@babylonjs/core/XR/WebXRExperienceHelper';

import { WebXRFeaturesManager, WebXRFeatureName } from '@babylonjs/core/XR/webXRFeaturesManager';

import { WebXRState } from '@babylonjs/core/XR';

BABYLON.WebXRSessionManager = WebXRSessionManager;

BABYLON.WebXRBackgroundRemover = WebXRBackgroundRemover;

BABYLON.WebXRFeaturesManager = WebXRFeaturesManager;

BABYLON.WebXRFeatureName = WebXRFeatureName;

BABYLON.WebXRExperienceHelper = WebXRExperienceHelper;

BABYLON.WebXRState = WebXRState;

// Importaciones específicas para Materiales

import {ShadowOnlyMaterial} from '@babylonjs/materials/shadowOnly';

BABYLON.ShadowOnlyMaterial = ShadowOnlyMaterial;

// Extra requirements

import "@babylonjs/core/Materials/Textures/Loaders/envTextureLoader";

import "@babylonjs/core/Engines/Extensions/engine.externalTexture";

import "@babylonjs/core/Helpers/sceneHelpers";

import "@babylonjs/core/XR/webXRFeaturesManager";

import "@babylonjs/core/XR/features/WebXRLightEstimation";

import "@babylonjs/core/XR";

I get this error when switching to XR mode

Uncaught (in promise) Build of NodeMaterial failed:
input rgba from block FragmentOutput[FragmentOutputBlock] is not connected and is not optional.

Promise. then (async)
_generateNewTouchPointMesh
_attachController
notifyObservers
_addAndRemoveControllers
WebXRInput._onInputSourcesChange
@chunk-7UMS06PQ.js?v=53df3067:11241
@chunk-7UMS06PQ.js?v=53df3067:10753
@chunk-A7RT1335.js?v=53df3067:241
@chunk-7UMS06PQ.js?v=53df3067:1273
@chunk-7UMS06PQ.js?v=53df3067:1236
@webxr-polyfill.js:2958
@webxr-polyfill.js:3391
XRSession$1.<computed>.onDeviceFrame
@webxr-polyfill.js:3161
requestAnimation Frame (async)
requestAnimationFrame
@webxr-polyfill.js:28307
dispatchEvent
_checkInputSourcesChange
XRSession$1.<computed>.startDeviceFrameLoop @webxr-polyfill.js:3178
XRSession$1
requestSession
@webxr-polyfill.js:3252
@webxr-polyfill.js:4461
await in requestSession (async)
CustomWebXRPolyfill.XRSystem.requestSession @ webxr-polyfill.js:33626
initializeSessionAsync
enterXRAsync
await in enterXRAsync (async)
_enterXRWithButtonIndex
@chunk-HUXU3UE7.js?v=53df3067:539
@chunk-37SE6FWL.js?v=53df3067:1924
@chunk-7UMS06PQ.js?v=53df3067:269

I’m almost sure that I’ve forgotten to import something more, but I cannot find it.
Any idea? Thank you in advance!

2

I’m not seeing an import for NodeMaterial, do you have it?

3

Mmm no, but what module is using it? notice that I’m not using it on my own.

If a module uses it, shouldn’t be it loaded by that module?

Anyway you were right (again) and
import '@babylonjs/core/Materials/Node/';
did the work.

4

Ooh, sorry, I thought it was part of your code, just cut off :sweat_smile: But now I understand the reason, the _generateNewTouchPointMesh uses a Node Material, which makes it require the nodes: Babylon.js/packages/dev/core/src/XR/features/WebXRNearInteraction.ts at ec5b848874848dfd4ae6eaf16dc06c67bfa4f9d5 · BabylonJS/Babylon.js · GitHub