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"
  },

这里是其中一种解决方案，但我认为这个问题已经解决了。所以我的代码出了什么问题呢？能有人帮忙吗？这里。

- tanjim anim

---

我在我的应用程序中突然遇到了这个问题。不确定我改变了什么导致它发生。只通过 cypress 测试触发。在本地开发环境中没有看到它。 - David Bashford

Answer 1

突然间，我也遇到了和你一模一样的问题，经过追踪，发现是webpack版本上升导致的问题。

将webpack版本锁定在5.70可以解决这个问题。它被升级到了5.71，我没有深入研究造成这个问题的更改。

- David Bashford

---

你是如何解决Webpack版本的问题的？ - tanjim anim

抱歉，“fixed”指的是我保留了从“floating”转变而来的版本。突然间，“floating” webpack 版本导致了我遇到了这个确切的问题。所以我将版本固定在 5.70 上，防止它升级到 5.71，然后错误就消失了。我已经编辑了答案，使其更加明确。这可能与你所遇到的问题有关，但也可能只是巧合，恰好在我遇到这个问题的几个小时内，我发现了你的问题。 - David Bashford