@ babel / plugin-offer-class-properties не подбирается при компиляции - PullRequest
Новая
       11

@ babel / plugin-offer-class-properties не подбирается при компиляции

0 голосов
/ 16 апреля 2020

Я пытаюсь включить Собственные календари React в мое веб-приложение React.

Я запустил 

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.

Я выполнил поиск в Google, и наиболее распространенным ответом, кажется, является 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"
      ]
  ]
}

, как предлагалось здесь , но это также не сработало.

Я сейчас совершенно в тупике ...

Мой вопрос: Это как-то связано с разными версиями? Я настолько запутался в стране зависимости, что теперь не знаю, что происходит.

Ниже приведен мой полный файл 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
        }
      ]
    ]
  }
}
...