Type Issue of React Three Drei

Questions
1

When I updated npm modules, there are some issues.

THREE.Vector3 is not a constructor
TypeError: THREE.Vector3 is not a constructor

package.json

{
  "name": "anatomy-temp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@headlessui/react": "^1.7.15",
    "@heroicons/react": "^2.0.18",
    "@react-three/drei": "^9.47.1",
    "@react-three/fiber": "^8.9.1",
    "@react-three/postprocessing": "^2.7.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.11.62",
    "@types/react": "^18.0.21",
    "@types/react-beautiful-dnd": "^13.1.4",
    "@types/react-dom": "^18.0.6",
    "classnames": "^2.3.2",
    "gsap": "^3.11.4",
    "hamburger-react": "^2.5.0",
    "rc-slider": "^10.1.1",
    "react": "^18.2.0",
    "react-beautiful-dnd": "^13.1.1",
    "react-custom-scrollbars-2": "^4.5.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.8.0",
    "react-scripts": "5.0.1",
    "sass": "^1.55.0",
    "typescript": "^4.8.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint \"**/*.{ts,tsx,js,jsx}\""
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/three": "^0.147.0",
    "eslint": "^8.24.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.2.1",
    "prettier": "^2.7.1",
    "tailwindcss": "^3.1.8",
    "three": "^0.147.0"
  }
}

image
image1895Ă—378 17.5 KB

Do you happen to know anyone who could help solve these issues?

2

Not sure why this error in particular occurs, and it may depend on the way your application is being built or executed. What I can tell you is that your dependencies and devDependencies are a little messy which may be the culprit.

Think of it like this:

  • Things your application needs to run (runtime libraries) go in the dependencies-list.
  • Things that are needed to build your application (or provide types for your IDE or compilers to understand) go to the devDependencies-list - they are development dependencies that are not needed by your application itself, but rather the tools that are used to build your application.

Some bundlers don’t include libraries that are in the devDependencies-list, as they should. I see you have three specified in the devDependencies, while Three is in fact a runtime library, meaning it goes to the dependencies-list.

3

Thank you for your message.
Is is possible for you to share demo package json file?
Actually, I am developing 3D project using r3f and typscript.
Looking forward to hearing from you as soon as possible.
Best

4

could you show the code, typescript is probably just telling you that you’re using THREE.Vector3 in the wrong way.

5

Fortunately, I didn’t use any Three.js vector3.
Additional, In my project, there isn’t any canvas element too. I just installed only three.js and r3f packages.

6

Please check screenshot. this issues is not for my code but just for npm package.

7

three btw is not a devdep, it belongs to dependencies

tailwindcss as well

8

I already explained to you what is wrong with your code, which starts with “package.json”.

If the problem persists, please make a reproducible example. Your screenshot doesn’t say much in where the problem is.

9

What happens of you comment out all your code that imports and uses Drei?
Just to test whether it is specific to when importing the Drei library.

10

Perhaps the cause of this issue stemmed from an incompatibility between the three.js version and r3d version. Fortunately, I was able to resolve the matter by reverting to an earlier version.

“three”: “0.149.0”,
“@types/three”: “0.149.0”,
“@react-three/drei”: “9.61.3”,
“@react-three/fiber”: “8.12.0”,

11

I experienced this issue, but I resolved it in my project by using the latest versions of everything as of today.

"@react-three/drei": "^9.74.15",
"@react-three/fiber": "^8.13.3",
"@types/node": "^20.3.1",
"@types/react": "^18.2.12",
"@types/react-dom": "^18.2.5",
"@types/three": "^0.152.1",
"leva": "^0.9.35",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^5.0.1",
"three": "^0.153.0",
"typescript": "^5.1.3"

If you want to use typescript 5 with the react-scripts@5.0.1, then you can add an overrides section to your package.json so that react-scripts doesn’t complain.

  "overrides": {
    "typescript": "^5.1.3"
  }

See : https://github.com/facebook/create-react-app/issues/13080#issuecomment-1487975896

If you want to know whether something needs to be in dependencies or devDependencies or not, see : node.js - What's the difference between dependencies, devDependencies, and peerDependencies in NPM package.json file? - Stack Overflow

My personal experience is that it doesn’t really matter unless my deployment process requires me to run

npm install --production

Which is very rarely the case, since usually all my client side dependencies are bundled into a single file anyway.

npm run build

Edit : Actually, I’ve just noticed that CodeSandbox, versus local node development, is very specific about whether your libs are in dependencies or not.

image
image501Ă—630 40 KB

1 Like
12

Made an account just to say THANK YOU!! I got this error yesterday and could not figure out what it was, but changing everything to the versions you listed has now fixed it.

2 Likes
13

The following code solves the problem when your project is being compiled from typsescript to Vanilla JS

// import * as THREE from 'three'
import { Vector3 } from 'three/src/math/Vector3';


//new THREE.Vector3()

new Vector3()

replace any THREE.Vector3 declaration in your typescript file. if the error comes from a third party library; you may need to contact the maintainers.