react-three-fiber
react-three-fiber copied to clipboard
Error in DOM - Error: Element type is invalid: expected...
Here's the error:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of
SpinningMesh
.
Here's my package.json:
{ "name": "my-app", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.12.0", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.8.3", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", "web-vitals": "^1.1.2" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@react-three/drei": "^6.1.2", "@react-three/fiber": "^7.0.1", "axios": "^0.21.1", "bootstrap": "^4.6.0", "i": "^0.3.6", "jquery": "^3.6.0", "react-awesome-slider": "^4.1.0", "react-bootstrap": "^1.6.0", "react-imgix": "^9.1.5", "react-router-dom": "^5.2.0", "react-spring": "^9.2.3", "sass": "^1.34.1", "three": "^0.129.0" } }
Something is seriously wrong here
Perhaps try replacing "import { useSpring, a } from "react-spring";" with "import { useSpring , a} from "@react-spring/three""?
Make sure you've installed and are importing from @react-three/fiber, not react-three-fiber
Make sure you've installed and are importing from @react-three/fiber, not react-three-fiber
Thanks! This worked for me! 🎉