Pmndrs from React-three-fiber Repository

MIT License

No tree shaking with NextJS and extend syntax #2552

Issue Opened
0xmax Opened Issue On Oct 5th 2022, 10:51


Hi, when using NextJS (12.1.6) the whole Three.module gets bundled on build.

I am including it via below code into a page. If I remove the includes, Three disappears from the bundle. If I include a single module from Three directly, it gets tree-shaken correctly and only that module is included in the build.

import { Canvas, extend } from '@react-three/fiber';

import Mesh from 'three/src/objects/Mesh';
import BoxGeometry from 'three/src/geometries/BoxGeometry';
import MeshStandardMaterial from 'three/src/materials/MeshStandardMaterial';

extend({ Mesh, BoxGeometry, MeshStandardMaterial }); 

Screenshot from 2022-10-05 12-41-35

I tried Googling / searching here to no avail. The same behaviour can be observed in the official boilerplate ( If sb can provide me with pointers on how to fix this I would be happy to create a PR.

kind regards Max

CodyJasonBennett commented on 1 month ago


See, Canvas extends the full three namespace internally but you can can create your own canvas and hardcode extensions or use a transformer like to codemod Canvas.

0xmax commented on 1 month ago


Thank you @CodyJasonBennett! This was exactly the pointer I needed. Will see if I can contribute something that could streamline the packaging a bit.

About Repository

🇨🇭 A React renderer for Three.js
Language: TypeScript
Star: 20561
Fork: 1164
Watchers: 20561
Open Issues: 37
MIT License
Last updated: 05 Dec 2022