drei: Rendering Html-Element breaks app with "missing react-dom" error although react-dom is installed

  • three version: 0.132.2
  • @react-three/fiber version: 7.0.7
  • @react-three/drei version: 7.8.0
  • node version: 16.9.1
  • npm (or yarn) version: 7.21.1

Problem description:

See https://github.com/pmndrs/drei/commit/4fd9cf191054b7fb0220e7a73d2276f74b8520ea#commitcomment-56962016.

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 1
  • Comments: 24 (19 by maintainers)

Commits related to this issue

Most upvoted comments

this was closed with f6ad92a

Btw, I asked one guy who knows a lot about bundlers on twitter and he basically said “just use different entrypoints” (https://twitter.com/IAmTrySound/status/1442412936073523200) Which drei already uses (web and native), it’s just the web is a default one, and having to use /native (and for all imports no less) because I don’t have react-dom is pretty confusing IMO

If we can consider a breaking change for Html component I have two proposals

  1. Move Html component from the web https://github.com/pmndrs/drei/blob/master/src/web/index.ts#L1, and require to use a different import for it, say import { Html } from '@react-three/drei/Html' (we can bikeshed later). import { Html } from '@react-three/drei' will no longer be possible. That way Html won’t be imported when you import anything else but it
  2. Inject ReactDOM.render and ReactDOM.unmountComponentAtNode (or the whole ReactDOM) as props to Html component. That way Html won’t need an internal import and importing react dom will be done by the userland

I like neither of them, but considering won’t hurt I guess

react-three-fiber can be easily used without react-dom (if you don’t need it), allows to strip a lot of bytes. https://docs.pmnd.rs/react-three-fiber/API/render-function

though, having the dependency does not hurt. if you don’t use Html it should never be part of the end bundle even though you have to have it in the dev environment. maybe we should revert the change if it causes that much trouble.