ReferenceError: THREE is not defined using React Three Fiber with Next.js

[proelf98]

I am using react three fiber with Next.js. But when trying to import three-mesh-ui I get the following error. I am not sure what I am doing wrong. Any ideas?

I've installed

my dependencies

 "dependencies": {
    "@capacitor/android": "^4.4.0",
    "@capacitor/core": "^4.4.0",
    "@capacitor/ios": "^4.4.0",
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "@mui/icons-material": "^5.10.9",
    "@mui/material": "^5.10.10",
    "@react-three/drei": "^9.40.0",
    "@react-three/fiber": "^8.8.10",
    "@react-three/xr": "^5.0.4",
    "express": "^4.18.2",
    "firebase": "^9.13.0",
    "firebaseui": "^6.0.1",
    "next": "12.3.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "socket.io": "^4.5.3",
    "socket.io-client": "^4.5.3",
    "three": "^0.145.0",
    "three-mesh-ui": "^6.5.2"
  },

Server Error
ReferenceError: THREE is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
file:///Users/noahk/Documents/netzbros/WebXR-feature-xr-painter/node_modules/three-mesh-ui/build/three-mesh-ui.min.js (1:1267)
Object.<anonymous>
file:///Users/noahk/Documents/netzbros/WebXR-feature-xr-painter/node_modules/three-mesh-ui/build/three-mesh-ui.min.js (1:67023)
Module._compile
node:internal/modules/cjs/loader (1105:14)
Object.Module._extensions..js
node:internal/modules/cjs/loader (1159:10)
Module.load
node:internal/modules/cjs/loader (981:32)
Function.Module._load
node:internal/modules/cjs/loader (822:12)
Module.require
node:internal/modules/cjs/loader (1005:19)
require
node:internal/modules/cjs/helpers (102:18)
Object.three-mesh-ui
file:///Users/noahk/Documents/netzbros/WebXR-feature-xr-painter/.next/server/pages/test.js (72:18)
__webpack_require__
file:///Users/noahk/Documents/netzbros/WebXR-feature-xr-painter/.next/server/webpack-runtime.js (33:42)

[swingingtom]

Hi @proelf98, Could you share a minimal reproductible repo ?

[proelf98]

Here is a minimal rep: https://github.com/proelf98/next-app-three-mesh-ui hope this helps

[swingingtom]

Whereas I wasn't being able to solve the issue, I still manage to get some clues.

The issue seems to come from when the project tries to import the "js" version (global lib) of three-mesh-ui. This version requires js version of three to be globally loaded first. https://github.com/felixmariotto/three-mesh-ui#js

When I've tried to force importing the module version of tree-mesh-ui I had errors about disallowing imports outside of modules. You can check this issue to know how I tried it #213

Do you have any hints why this is happening ?

[brownie11636]

any update?

now i've added this library in my project by just copy and paste "/src"of this repo in project directory...