时间戳

首页 > 解决方案 > 使用 Typescript 的 create-react-app ：当前未启用对实验性语法“classProperties”的支持

reactjs - 使用 Typescript 的 create-react-app ：当前未启用对实验性语法“classProperties”的支持

问题描述

我创建了一个反应应用程序npx create-react-app my-app --template typescript并添加了反应组件rn-sliding-up-panel。我知道 rn 代表 react native，但解决方案是纯 js 并且在网络上运行良好。

现在我明白了Support for the experimental syntax 'classProperties' isn't currently enabled (35:20): Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.

这是一个很棒的信息错误消息。不幸的是，我没有 babel 配置，因为我想用 typescript 进行整个编译。

我已经尝试将配置添加到我的 package.json 中，但没有任何运气

{
  "name": "slider-test",
  "version": "0.1.0",
  "private": true,
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties"
    ]
  },
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "@types/jest": "^24.0.24",
    "@types/node": "^12.12.21",
    "@types/react": "^16.9.16",
    "@types/react-dom": "^16.9.4",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.3.0",
    "rn-sliding-up-panel": "^2.4.0",
    "typescript": "^3.7.3"
  },
  "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"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.7.4"
  }
}

我怎样才能解决这个问题？

标签： reactjstypescriptbabeljsreact-create-app

解决方案

推荐阅读