Reactjs @编译时未拾取babel/插件建议类属性

我正在尝试将React并入我的Web应用程序

我跑了

npm install --save react-native-calendars

然后将

日历

组件添加到页面（然后由

App.js

呈现）

我在谷歌上搜索过，最常见的答案似乎是运行

npm install@babel/plugin proposition class properties

（我已经这样做了），然后添加

"babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ]
    ]
  }

到

package.json

文件，但是这并没有解决我的问题

我找到了更多关于使用

.babelrc

文件的答案。我的项目最初没有一个（它是通过

createreact-app

创建的），所以我创建了一个并添加了一个

{
  "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
  ],
  "plugins": [
      [
        "@babel/plugin-proposal-class-properties"
      ]
  ]
}

正如建议的那样，但这也不起作用

我现在完全被难住了

我的问题：是否与不同版本有关？我陷入了依赖地的困境，现在我不知道发生了什么

---

下面是我完整的

package.json

文件-除了添加

babel

对象之外，我没有碰过它

{
  "name": "<redacted>",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@material-ui/icons": "^4.9.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-native-calendars": "^1.265.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ]
    ]
  }
}

{
“名称”：“，
“版本”：“0.1.0”，
“私人”：没错，
“依赖项”：{
“@babel/plugin提案类属性”：“^7.8.3”，
“@material ui/图标”：“^4.9.1”，
“@测试库/jest dom”：“^4.2.4”，
“@testing library/react”：“^9.5.0”，
“@测试库/用户事件”：“^7.2.1”，
“反应”：“^16.13.1”，
“react dom”：“^16.13.1”，
“反应本机日历”：“^1.265.0”，
“反应路由器dom”：“^5.1.2”，
“反应脚本”：“3.4.1”
},
“脚本”：{
“开始”：“反应脚本开始”，
“构建”：“反应脚本构建”，
“测试”：“反应脚本测试”，
“弹出”：“反应脚本弹出”
},
“eslintConfig”：{
“扩展”：“反应应用程序”
},
“浏览者”：{
“生产”：[
">0.2%",
“没有死”，
“不是全部”
],
“发展”：[
“上一个chrome版本”，
“上一个firefox版本”，
“最后1个safari版本”
]
},
“巴别塔”：{
“预设”：[
“@babel/preset env”，
“@babel/预设反应”
],
“插件”：[
[
“@babel/插件建议类属性”，
{
“松散”：真实
}
]
]
}
}

您已经解决了这个问题吗？有同样的问题。不，一点线索也没有！您是否正在尝试使用react native到web？它是如何工作的？

{
  "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
  ],
  "plugins": [
      [
        "@babel/plugin-proposal-class-properties"
      ]
  ]
}

{
  "name": "<redacted>",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@material-ui/icons": "^4.9.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-native-calendars": "^1.265.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ]
    ]
  }
}