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

**URL:** https://forum.babylonjs.com/t/following-es6-support-with-tree-shaking-fails-to-yield-a-working-example/38655
**Category:** Questions
**Created:** [March 1, 2023, 7:53pm UTC](https://forum.babylonjs.com/t/following-es6-support-with-tree-shaking-fails-to-yield-a-working-example/38655 "2023-03-01T19:53:59Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![rascheln](https://avatars.discourse-cdn.com/v4/letter/r/e19b73/32.png) [@rascheln](https://forum.babylonjs.com/u/rascheln)
#### Post date: [March 1, 2023, 7:53pm UTC](https://forum.babylonjs.com/t/following-es6-support-with-tree-shaking-fails-to-yield-a-working-example/38655/1 "2023-03-01T19:53:59Z")

</div>

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](https://doc.babylonjs.com/setup/frameworkPackages/es6Support). 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/](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:

```auto
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?

---

<div class="post-metadata">

### Author: ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)
#### Post date: [March 1, 2023, 8:44pm UTC](https://forum.babylonjs.com/t/following-es6-support-with-tree-shaking-fails-to-yield-a-working-example/38655/2 "2023-03-01T20:44:25Z")

</div>

> [@rascheln](#):
>
> npm install --save-dev @babylonjs/core

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](https://doc.babylonjs.com/setup/frameworkPackages/es6Support#installing-other-babylon-modules)

---

<div class="post-metadata">

### Author: ![rascheln](https://avatars.discourse-cdn.com/v4/letter/r/e19b73/32.png) [@rascheln](https://forum.babylonjs.com/u/rascheln)
#### Post date: [March 1, 2023, 9:29pm UTC](https://forum.babylonjs.com/t/following-es6-support-with-tree-shaking-fails-to-yield-a-working-example/38655/3 "2023-03-01T21:29:21Z")

</div>

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.
