reactjs - Adding drei to react-three-fiber causes error

Question

I am working on a react-three-fiber project and I added drei as I have in the past.

npm i drei

The problem is that once I tried to use the Html aspect, it threw an error about how it could not find the curve modifier. I have used drei in the past with no issues, but I have no idea how to handle this.

Module not found: Can't resolve 'three/examples/jsm/modifiers/CurveModifier' in '/Users/....'

The import statement :

import { Html } from "@react-three/drei";

Part of the package.json file

"dependencies": {
"@react-three/drei": "2.2.18",
"axios": "0.19.2",
"chroma-js": "2.1.0",
"next": "9.5.0",
"next-redux-wrapper": "6.0.2",
"prop-types": "15.7.2",
"ramda": "0.27.0",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-redux": "7.2.1",
"react-three-fiber": "4.2.18",
"redux": "4.0.5",
"redux-devtools-extension": "2.13.8",
"redux-saga": "1.1.3",
"three": "0.119.0"
}

Answer 1

CurveModifier is a new three feature. Either update threejs, or do import { Html } from "@react-three/drei/Html";