Framer Motion not working with NextJs
Answered
Transvaal lion posted this in #help-forum
Transvaal lionOP
This is the error message
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.
Not sure why this is happening. I added one motion.div.
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.
Not sure why this is happening. I added one motion.div.
2 Replies
Transvaal lionOP
"dependencies": {
"framer-motion": "^12.23.12",
"next": "15.5.3",
"react": "19.1.0",
"react-dom": "19.1.0"
},
"devDependencies": {
"@eslint/eslintrc": "^3",
"@tailwindcss/postcss": "^4",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"eslint": "^9",
"eslint-config-next": "15.5.3",
"tailwindcss": "^4",
"tailwindcss-motion": "^1.1.1",
"typescript": "^5"
}
"framer-motion": "^12.23.12",
"next": "15.5.3",
"react": "19.1.0",
"react-dom": "19.1.0"
},
"devDependencies": {
"@eslint/eslintrc": "^3",
"@tailwindcss/postcss": "^4",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"eslint": "^9",
"eslint-config-next": "15.5.3",
"tailwindcss": "^4",
"tailwindcss-motion": "^1.1.1",
"typescript": "^5"
}
Transvaal lionOP
It needs to use client blahhhhh
Answer