Next.js > react-three-fiber > three.js

[enkicoma]

Hi guys,

I am experimenting on something... 😄

I know that next.js are more for static websites but I tried to add some three react components to see how it will behave...
pages/index.js
import { Canvas, Dom, useLoader, useFrame } from "react-three-fiber"

I have it imported, but getting this error. Failed to compile

wait  - compiling...
error - ./pages/index.js
Attempted import error: 'Dom' is not exported from 'react-three-fiber'.

In a return () / function I am calling <Dom>

        <Dom
          style={{ width: pixelWidth / (mobile ? 1 : 2), textAlign: left ? "left" : "right" }}
          position={[left || mobile ? (-w * size) / 2 : 0, (-w * size) / 2 / aspect - 0.4, 1]}>
          <div tabIndex={index}>{text}</div>
        </Dom>

There is no much on the internet, docs, tuttorials...

./pages/index.js
Attempted import error: 'react-three-fiber' does not contain a default export (imported as 'Dom').

I am trying to render / compile something that is not supported by next.js?

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "9.5.2",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-three-fiber": "^5.0.3",
    "three": "^0.121.1"
  },

[gsimone]

Did you follow the example? https://github.com/vercel/next.js/tree/canary/examples/with-three-js

[enkicoma]

I checked only the PR 12a380d and UPDATED my files to fit, will try to delete everything and try it. Thanks

[drcmda]

Dom is not part of r3f but the drei library, i think since version 3 or 4. it is called "Html" there.

[enkicoma]

Hmmm
https://developer.aliyun.com/mirror/npm/package/react-three-fiber-cambrian

[enkicoma]

so, mjurczyk from Discord confirmed that react-three-fiber has no Dom export

this is quite weird because I found this:

Will it be nice to have at least an explanatory error when something is removed / not supported anymore in (r3f), but I don't think I can do much here )

Thank you for your time guys!

[DevMemberR]

from "drei" now "@react-three-drei". I had some issues importing `import { Html } from "@react-three/drei";` which I solved with `import { Html } from "@react-three/drei/web/Html.js";`.