我正在尝试在我的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" } }

请指导我哪里做错了