问题描述
在我尝试将 ChakraUI 添加到我的 create-react-app 后出现错误。希望得到任何帮助(也很感谢您对在 stackoverflow 问题中添加什么的建议)
我按照 https://chakra-ui.com/docs/getting-started
中的建议运行了yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
我使用 CRA 来启动我的应用程序,但在我已经开始一些开发之后决定添加 chakra。这就是为什么我没有使用 yarn create react-app my-app --template @chakra-ui
但是在运行 yarn
和 yarn start
后,我收到了有关 framer-motion 的错误:
[类型错误:framer_motion__WEBPACK_IMPORTED_MODULE_1__.motion.custom 不是函数][1]
我的 index.js 文件如下所示:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { ChakraProvider } from '@chakra-ui/react';
ReactDOM.render(
<React.StrictMode>
<ChakraProvider>
<App />
</ChakraProvider>
</React.StrictMode>,document.getElementById('root')
);
package.json:
{
"name": "gad-questionaire","version": "0.1.0","private": true,"dependencies": {
"@chakra-ui/react": "^1.3.4","@emotion/react": "^11","@emotion/styled": "^11","@testing-library/jest-dom": "^5.11.4","@testing-library/react": "^11.1.0","@testing-library/user-event": "^12.1.10","framer-motion": "^4","react": "^17.0.1","react-dom": "^17.0.1","react-router-dom": "^5.2.0","react-scripts": "4.0.3","web-vitals": "^1.0.1"
},"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"
]
}
}
使用反应版本:17.0.1
预先感谢您的任何建议 [1]:https://i.stack.imgur.com/Vs3oU.png
解决方法
npm i framer-motion@3.10.6
? 对我有用,4.0 似乎有重大变化