编译时未获取@ babel / plugin-proposal-class-properties

Question

我正在尝试将React Native Calendars合并到我的React Webapp中。

我已经跑步

npm install --save react-native-calendars

，然后将Calendar组件添加到页面（然后由App.js呈现）

import React from 'react';
import {Calendar} from 'react-native-calendars';

class CalendarPage extends React.Component{
    render(){
        return (
            <div>
                <h1>This is the calendar</h1>
                <Calendar />
            </div>
        )
    }
}

export default CalendarPage;

当我运行npm start（或在服务器运行时保存文件）时，出现错误

SyntaxError: <filepath hidden>\node_modules\react-native-calendars\src\agenda\index.js: Support for the experimental syntax 'classProperties' isn't currently enabled (28:22):

  26 |  */
  27 | export default class AgendaView extends Component {
> 28 |   static displayName = 'Agenda';
     |                      ^
  29 | 
  30 |   static propTypes = {
  31 |     /** Specify theme properties to override specific styles for calendar parts. Default = {} */

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.

我已经完成了一些谷歌搜索，最常见的答案似乎是运行npm install @babel/plugin-proposal-class-properties（我已经完成了），然后添加

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

到package.json文件。但是，这并没有解决我的问题。

我找到了更多有关使用.babelrc文件的答案。我的项目最初没有一个项目（它是通过create-react-app创建的），所以我创建了一个项目并添加了

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

如建议的here，但这也不起作用。

我现在完全迷住了……

我的问题：与不同版本有关吗？我在依附土地上纠缠不清，以至于现在不知道发生了什么。

---

下面是我的完整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
        }
      ]
    ]
  }
}