javascript - ReactJS framer_motion__WEBPACK_IMPORTED_MODULE_5__.motion.custom 不是函数

Question

我在我的 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"
  },

Here是它的解决方案之一，但我认为这个问题已解决。那么我的代码有什么问题。有人可以帮忙吗？

Answer 1

出乎意料的是，我在你遇到它的同时也遇到了这个完全相同的问题，我追踪到它是 webpack 版本 float 并导致问题的。

将 webpack 版本固定在 5.70 已经为我解决了这个问题。它已经 float 到 5.71。我没有调查是什么导致了这个问题。