javascriptreactjsbabeljsbabel-loaderwatermelondb

Support for the experimental syntax 'decorators' isn't currently enabled (8:3):

I am trying to use @field in my react.js application. This application is bought theme from Themeforest. The error i am facing is this

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.

The file where i am using is this 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
  //   }
  // }

}

The solution which i see on internet is to add these lines in .babelrc. But in my case these seems like configuration is done in package.json file because i have no .babelrc file

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

This is my whole package.json file

{
  "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"
  }
}

Please guide me where I am doing anything wrong

Solution

  • Try this one: install customize-cra via your package manager and then create config-overrides.js file in root directory where your package.json is and put this code in it:

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

    and delete babel configuration from your package.json. you can transfer your config into config-overrides.js as customize-cra documentation suggests. (https://github.com/arackaf/customize-cra/blob/HEAD/api.md)