如何解决Upgarde 使用 webpacker 5 在 rails 中响应 17
我正在尝试使用 webpacker 5 在我的 rails 5 项目上升级 react 版本,我正在使用 gem "react-rails","2.4.4"
并且我尝试在 react 17 中使用新的 JSX 转换功能,但是遇到了一些错误
在我的 package.json
中使用
"@babel/cli": "^7.12.1","@babel/core": "^7.12.3","@babel/plugin-proposal-class-properties": "^7.12.1","@babel/plugin-proposal-decorators": "^7.12.1","@babel/plugin-proposal-export-namespace-from": "^7.12.1","@babel/plugin-proposal-function-sent": "^7.12.1","@babel/plugin-proposal-json-strings": "^7.12.1","@babel/plugin-proposal-numeric-separator": "^7.12.1","@babel/plugin-proposal-throw-expressions": "^7.12.1","@babel/plugin-syntax-dynamic-import": "^7.8.3","@babel/plugin-syntax-import-meta": "^7.10.4","@babel/polyfill": "^7.12.1","@babel/preset-env": "^7.12.1","@babel/preset-react": "^7.12.1","@babel/runtime-corejs2": "^7.12.1","react_ujs": "^2.4.4","webpack": "^5.0.0-rc.6","webpack-cli": "^3.0.1","@rails/webpacker": "^5.2.1",
这是我要挂载的组件
import { Provider } from 'react-redux';
import store from './store/index';
import GardenView from './GardenPlan/containers/GardenView';
const GardenPlanApp = props => (
<Provider store={store}>
<GardenView
garden={props.garden}
garden_plants={props.garden_plants}
my_garden={props.my_garden}
isImperial={props.isImperial}
isMobile={props.isMobile}
/>
</Provider>
);
export default GardenPlanApp;
而且我还按照 https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html 配置了我的 .babalrc
文件,这是我的 .babelrc
文件:
{
"presets": [
[
"@babel/preset-env",{
"targets": {
"browsers": "> 1%"
},"useBuiltIns": "usage","corejs": 2,"forceAllTransforms": true
}
],"@babel/react",[
"@babel/preset-react",{
"runtime": "automatic"
}
]
],"plugins": [
"@babel/plugin-syntax-dynamic-import","@babel/plugin-proposal-object-rest-spread",[
"transform-class-properties",{
"spec": true
}
]
]
}
如何通过新的 JSX 转换以正确的方式使用 react 17 with rails ?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。