Console error: "MeshReflectorMaterial" is not part of the THREE namespace!

[bfuhne]

• three version: 0.125.1
• react-three-fiber version: 5.3.18
• @react-three/drei version: 3.0.0-beta.6
• node version: 14.13.0
• npm (or yarn) version: 6.14.8

Problem description:

I downloaded the drei reflector demo, which is running fine as it is.

Then I run npm run-script build.
The build process finishes successfully.
But opening the build in the browser throws an error and the scene remains black:

"MeshReflectorMaterial" is not part of the THREE namespace! Did you forget to extend it?

How can I create a successful build?

[joshuaellis]

Can you please provide an example of the code? Repo or Sandbox is fine.

[bfuhne]

Hi,

I downloaded the code from this sandbox:

https://codesandbox.io/s/drei-reflector-bfplr

And then ran npm install. Tested the demo using npm run-script start - is running fine.
Build via npm run-script build - Serving the build results in the above error.

[drcmda]

@joshuaellis i think it should explicitely do

import '../materials/MeshReflectorMaterial'

in Reflector.tsx

the message above means that the extend wasn't executed for some reason. or at least by the time something tries to do

<meshReflectorMaterial/>

r3f had no known object for that. i think this is tree-shaking messing it up in production. it will remove MeshReflectorMaterial because it's never being used anywhere explicitely.

[joshuaellis]

Hi @bfuhne,

Thanks for that. I've added a fix on beta - 3.1.0-beta.1 (im not sure why semantic-bot decided its 3.1). I've tested it and & it works for me, it'd be great if you can confirm too & i can merge to master for release.

cc @gsimone

[bfuhne]

Hi @joshuaellis,

can confirm, build version works beautifully with 3.1.0-beta.1.
I'm in awe of this level of help and support. Just amazing.