目前未啟用對實驗語法「裝飾器」的支援 (8:3)

Question

我正在尝试在我的react.js应用程序中使用@field。该应用程序是从 Themeforest 购买的主题。我面临的错误是这样的

ERROR in ./src/watermelon/model/Staff.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\projects\siloc-react-laravel\siloc-react\src\watermelon\model\Staff.js: Support for the experimental syntax 'decorators' isn't currently enabled (8:3):

   6 |
   7 |
>  8 |   @field('name') name;
     |   ^
   9 |   // @action async getStaff()
  10 |   // {
  11 |   //   return {

Add @babel/plugin-proposal-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-proposal-decorators) to the 'plugins' section of your Babel config to enable transformation.

我使用的文件是这个 Staff.js

import { Model } from '@nozbe/watermelondb';
import { field } from '@nozbe/watermelondb/decorators';

export default class Staff extends Model {
  static table = 'staff';


  @field('name') name;
  // @action async getStaff()
  // {
  //   return {
  //     id: this.id,
  //     name: this.name
  //   }
  // }

}

我在互联网上看到的解决方案是在 .babelrc 中添加这些行。但就我而言，这些似乎是在 package.json 文件中完成的配置，因为我没有 .babelrc 文件

"plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ],
      [
        "@babel/plugin-transform-runtime",
        {
          "helpers": true,
          "regenerator": true
        }
      ]
    ]

这是我的整个 package.json 文件

{
  "name": "able-pro-material-react",
  "version": "9.1.0",
  "private": true,
  "dependencies": {
    "@auth0/auth0-spa-js": "^2.0.5",
    "@babel/plugin-syntax-decorators": "^7.22.3",
    "@date-io/date-fns": "^2.16.0",
    "@date-io/dayjs": "^2.16.0",
    "@date-io/luxon": "^2.16.1",
    "@date-io/moment": "^2.16.1",
    "@emotion/cache": "^11.11.0",
    "@emotion/react": "^11.11.0",
    "@emotion/styled": "^11.11.0",
    "@fullcalendar/common": "^5.11.5",
    "@fullcalendar/core": "^6.1.8",
    "@fullcalendar/daygrid": "^6.1.8",
    "@fullcalendar/interaction": "^6.1.8",
    "@fullcalendar/list": "^6.1.8",
    "@fullcalendar/react": "^6.1.8",
    "@fullcalendar/timegrid": "^6.1.8",
    "@fullcalendar/timeline": "^6.1.8",
    "@hello-pangea/dnd": "^16.2.0",
    "@mui/base": "^5.0.0-beta.2",
    "@mui/lab": "^5.0.0-alpha.131",
    "@mui/material": "^5.13.2",
    "@mui/system": "^5.13.2",
    "@mui/x-date-pickers": "^6.5.0",
    "@mui/x-date-pickers-pro": "^6.5.0",
    "@nozbe/watermelondb": "^0.26.0",
    "@react-pdf/renderer": "^3.1.9",
    "@reduxjs/toolkit": "^1.9.5",
    "@svgr/webpack": "8.0.1",
    "@testing-library/react": "^14.0.0",
    "amazon-cognito-identity-js": "^6.2.0",
    "apexcharts": "^3.40.0",
    "autosuggest-highlight": "^3.3.4",
    "axios": "^1.4.0",
    "axios-mock-adapter": "^1.21.4",
    "buffer": "^6.0.3",
    "chance": "^1.1.11",
    "crypto-browserify": "^3.12.0",
    "crypto-js": "^4.1.1",
    "currency.js": "^2.0.4",
    "date-fns": "^2.30.0",
    "draft-js": "^0.11.7",
    "emoji-picker-react": "^4.4.9",
    "firebase": "^9.22.1",
    "formik": "^2.2.9",
    "framer-motion": "^10.12.16",
    "history": "^5.3.0",
    "iconsax-react": "^0.0.8",
    "immutability-helper": "^3.1.1",
    "jwt-decode": "^3.1.2",
    "lodash": "^4.17.21",
    "match-sorter": "^6.3.1",
    "notistack": "^3.0.1",
    "process": "^0.11.10",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-apexcharts": "^1.4.0",
    "react-app-rewired": "^2.2.1",
    "react-compare-slider": "^2.2.0",
    "react-copy-to-clipboard": "^5.1.0",
    "react-csv": "^2.2.2",
    "react-device-detect": "^2.2.3",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
    "react-dnd-scrolling": "^1.3.3",
    "react-dnd-touch-backend": "^16.0.1",
    "react-dom": "^18.2.0",
    "react-draft-wysiwyg": "^1.15.0",
    "react-draggable": "^4.4.5",
    "react-dropzone": "^14.2.3",
    "react-fast-marquee": "^1.6.0",
    "react-google-recaptcha": "^2.1.0",
    "react-intersection-observer": "^9.4.3",
    "react-intl": "^6.4.2",
    "react-number-format": "^5.2.2",
    "react-organizational-chart": "^2.2.1",
    "react-quill": "^2.0.0",
    "react-redux": "^8.0.5",
    "react-router": "^6.11.2",
    "react-router-dom": "^6.11.2",
    "react-scripts": "^5.0.1",
    "react-slick": "^0.29.0",
    "react-spring": "9.7.1",
    "react-syntax-highlighter": "^15.5.0",
    "react-table": "^7.8.0",
    "react-table-sticky": "^1.1.3",
    "react-timer-hook": "^3.0.6",
    "react-to-print": "^2.14.12",
    "react-window": "^1.8.9",
    "react-zoom-pan-pinch": "^3.0.7",
    "react18-input-otp": "^1.1.3",
    "redux-persist": "^6.0.0",
    "simplebar": "^6.2.5",
    "simplebar-react": "^3.2.4",
    "slick-carousel": "^1.8.1",
    "stream-browserify": "^3.0.0",
    "stylis-plugin-rtl": "^2.1.1",
    "use-places-autocomplete": "^4.0.0",
    "util": "^0.12.5",
    "uuid": "^9.0.0",
    "web-vitals": "^3.3.1",
    "yup": "^1.2.0"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build-stage": "env-cmd -f .env.qa react-app-rewired build",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "babel": {
    "presets": [
      "@babel/preset-react"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ],
      [
        "@babel/plugin-transform-runtime",
        {
          "helpers": true,
          "regenerator": true
        }
      ]
    ]
  },
  "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/core": "^7.22.1",
    "@babel/eslint-parser": "^7.21.8",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-proposal-decorators": "^7.22.3",
    "@babel/plugin-transform-runtime": "^7.22.4",
    "env-cmd": "^10.1.0",
    "eslint": "^8.41.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-config-react-app": "7.0.1",
    "eslint-plugin-flowtype": "^8.0.3",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "immutable": "^4.3.0",
    "prettier": "^2.8.8",
    "react-error-overlay": "6.0.11"
  }
}

请指导我哪里做错了

Answer 1

試試這個： 透過套件管理器安裝customize-cra，然後在package.json所在的根目錄中建立config-overrides.js檔案並將以下程式碼放入其中：

const { addBabelPlugins, override } = require("customize-cra");
module.exports = override(
  ...addBabelPlugins(
    [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
    ]
  )
);

並從 package.json 中刪除 babel 設定。 您可以按照customize-cra文件的建議將您的設定轉移到config-overrides.js中。 (https://github.com/arackaf/customize-cra/blob /HEAD/api.md)