Error when using Parcel with tree shaking

Questions
1

So I enabled tree shaking on ParcelJS, and I got this error when opening the .html :
Access to XMLHttpRequest at ‘file:///C:/Users/XXXX/Documents/MyProjects/XXXX/parcel_test/dist/src/Shaders/default.vertex.fx’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

I dont know why the script looks for “src/Shaders/default.vertex.fx” in the /dist folder.
I’m wondering if I need to import some module ?
without treeshaking, the build works fine.

Current modules imported:
import { Engine } from “@babylonjs/core/Engines/engine”;
import { Scene } from “@babylonjs/core/scene”;
import { Vector3, Color3 } from “@babylonjs/core/Maths/math”;
import { HemisphericLight } from “@babylonjs/core/Lights/hemisphericLight”;
import { StandardMaterial } from “@babylonjs/core/Materials/standardMaterial”;
import { Texture } from “@babylonjs/core/Materials/Textures/texture”;
import { SceneLoader } from “@babylonjs/core/Loading/sceneLoader”;
import “@babylonjs/loaders/glTF/2.0/glTFLoader”;
import “@babylonjs/core/Loading/loadingScreen”;
import “@babylonjs/core/Loading/Plugins/babylonFileLoader”;
import “@babylonjs/core/Cameras/universalCamera”;

2

pinging our module mastermind @sebavan

1 Like
3

Are you using our build npm package or manually hooking into the repo ?

if you rely on our build it is strange as we do

import “…/Shaders/default.vertex”;

In the standard mat and this should run the side effects responsibles of filling the shader store. Here, it seems that the store is empty so we look up online.

I do not know how parcel handles side effects but it seems that it does not and unfortunately I do not have any parcel experience.

Maybe somebody from the community does ???

1 Like
4

Yes, I use your npm build.
I did try to import the seemingly missing modules but I still get the error.
Thanks anyway. I guess I’ll go back to webpack :nauseated_face:

5

Could you try import “…/Shaders/default.vertex.js”; ???

6

Yes, I imported both :
import “@babylonjs/core/Shaders/default.vertex”;
import “@babylonjs/core/Shaders/default.fragment”;

Still get these errors:

image
image624×615 23.9 KB

7

But can you try with the .js at the end ???

I wonder if their resolution system is confused by the .vertex and thinks it should not add the .js If it is the case, there is probably a config we could play with.

8

Actually I would guess forcing the js packager for .vertex and .fragment might do ???

9

Probably Origin is null because it’s from your local file system rather than a local server. Can you try running under a local server such as ws - npm

10

Adding the .js did not solve it. same errors.
Also, everything is inline in the .html; so it suppose to work without a server. it does without tree shaking.
Thanks.

11

Without tree shaking is there a XMLHttpRequest?

12

No XMLHttpRequest requests.

image
image691×182 10.6 KB

13

Could you share your project on Github ???

14

I tried on my side and it looks like it works as long as you do not minify on 1.9 due to Scope hoisted ES6 classes fail if minified · Issue #2513 · parcel-bundler/parcel · GitHub

Now in parcel early 2 version it all works as expected:

image
image1558×963 90.6 KB

My code looks like this:

import { Engine } from "@babylonjs/core/Engines/engine";
import { Scene } from "@babylonjs/core/scene";
import { Vector3 } from "@babylonjs/core/Maths/math";
import { FreeCamera } from "@babylonjs/core/Cameras/freeCamera";
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
import { Mesh } from "@babylonjs/core/Meshes/mesh";

import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial";

// Required side effects to populate the Create methods on the mesh class. Without this, the bundle would be smaller but the createXXX methods from mesh would not be accessible.
import "@babylonjs/core/Meshes/meshBuilder";

// Get the canvas element from the DOM.
const canvas = document.getElementById("renderCanvas");

// Associate a Babylon Engine to it.
const engine = new Engine(canvas);

// Create our first scene.
var scene = new Scene(engine);

// This creates and positions a free camera (non-mesh)
var camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);

// This targets the camera to scene origin
camera.setTarget(Vector3.Zero());

// This attaches the camera to the canvas
camera.attachControl(canvas, true);

// This creates a light, aiming 0,1,0 - to the sky (non-mesh)
var light = new HemisphericLight("light1", new Vector3(0, 1, 0), scene);

// Default intensity is 1. Let's dim the light a small amount
light.intensity = 0.7;

// Create a grid material
var material = new StandardMaterial("std", scene);

// Our built-in 'sphere' shape. Params: name, subdivs, size, scene
var sphere = Mesh.CreateSphere("sphere1", 16, 2, scene);

// Move the sphere upward 1/2 its height
sphere.position.y = 2;

// Affect a material
sphere.material = material;

// Our built-in 'ground' shape. Params: name, width, depth, subdivs, scene
var ground = Mesh.CreateGround("ground1", 6, 6, 2, scene);

// Affect a material
ground.material = material;

// Render every frame
engine.runRenderLoop(() => {
    scene.render();
});

and my package.json:

{
  "name": "toto",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babylonjs/core": "^4.1.0-beta.4",
    "parcel": "^2.0.0-alpha.3.2"
  }
}
3 Likes
15

Thanks a lot for your time.