我在我的React项目中使用ChakraUI,但遇到以下错误:
chakra-ui-checkbox.esm.js:146
Uncaught TypeError: framer_motion__WEBPACK_IMPORTED_MODULE_5__.motion.custom is not a function
at Module../node_modules/@chakra-ui/checkbox/dist/chakra-ui-checkbox.esm.js (chakra-ui-checkbox.esm.js:146:1)
at Module.options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at Module../node_modules/@chakra-ui/react/dist/chakra-ui-react.esm.js (chakra-ui-react-utils.esm.js:91:1)
at Module.options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at Module../src/App.js (bundle.js:18:74)
at Module.options.factory (react refresh:6:1)
以下是我在我的 app.js 文件中的使用方法:
import Navbar from "./components/navbar/navbar";
import { useState } from "react";
import { ChakraProvider } from "@chakra-ui/react";
import theme from "./theme";
function App() {
const [isMenuOpen, setIsMenuOpen] = useState(false);
return (
<div>
<ChakraProvider>
<Navbar isMenuOpen={isMenuOpen} setIsMenuOpen={setIsMenuOpen} />
</ChakraProvider>
</div>
);
}
export default App;
这是我的package.json文件。
"dependencies": {
"@chakra-ui/react": "^1.8.7",
"@emotion/react": "^11.8.2",
"@emotion/styled": "^11.8.1",
"@testing-library/jest-dom": "^5.16.3",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",
"framer-motion": "^6.2.8",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
这里是其中一种解决方案,但我认为这个问题已经解决了。所以我的代码出了什么问题呢?能有人帮忙吗?这里。