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 (将#修改为@）