Following "ES6 support with Tree Shaking" fails to yield a working example

Questions
1

I’ve been learning how to set up a basic babylon project locally, following the instructions located at Babylon.js ES6 support with Tree Shaking | Babylon.js Documentation. There is a summary of steps like so:

  1. Create new folder MyAwesomeApp
  2. Open GitBash (or similar) for MyAwesomeApp
  3. npm init
  4. npm install webpack webpack-cli webpack-dev-server --save-dev
  5. npm install --save-dev @babylonjs/core
  6. Create index.html file in MyAwesomeApp as described in First App Section below
  7. Create Folder src in MyAwesomeApp
  8. Create index.js file in src as described in First App Section below
  9. npx webpack serve to check result in http://localhost:8080/
  10. npx webpack _to create dist folder

I created the folder, followed all of the above commands, and pasted the index.html and index.js in their respective locations and directories. However, when I get to step 9, I get the following error:

ERROR in ./src/index.js 9:0-70
Module not found: Error: Can't resolve '@babylonjs/materials/grid/gridMaterial'

Indeed, I look within @babylonjs in the node_modules folder and I see no such directory that exists.

How can I resolve this?

2

you need to add npm install --save-dev @babylonjs/materials which is here in the doc Babylon.js ES6 support with Tree Shaking | Babylon.js Documentation

3

Ah, I see. I was concerned that the instructions would make “you can do this, for example” and “you MUST do this” look very similar.

For instance, “After including @babylonjs/core you can add Babylon’s extra modules using npm as follows:” I interpreted that as a descriptive statement of “yes, this is possible”, vs. a prescriptive statement “do this next” especially since it wasn’t included in the summary.

I’m going to delete this and start over, knowing, now, that the actual instructions are blended in with the other content.

1 Like