0

I am currently trying to include into my app the component Feathery React Forms However, after I install the module, and importing it into a component, this message always appear.

./node_modules/react-idle-timer/dist/index.esm.js SyntaxError: /home/lorenzo/Repository/equipzilla-web-client/node_modules/react-idle-timer/dist/index.esm.js: Support for the experimental syntax 'classProperties' isn't currently enabled (1:6658):

Followed by: Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation. So, after testing the module and seeing the error, I proceeded to install the module and adding it to the babel config files.

The problem is: I have tried adding the plugin to the babel config files, via .babelrc, or adding babel.config.js to the root of the folder, but none of this options are working. I have tested with more options but I dont know how to get this module started, and prior to installing and importing the new module, nothing of this happens

I have installed the package and tried adding it to the babel config file in various ways I have tried with this files

babel.config.js:

module.exports = function (api) {
  
    // Only execute this file once and cache the resulted config object below for the next babel uses.
    // more info about the babel config caching can be found here: https://babeljs.io/docs/en/config-files#apicache
    api.cache.using(() => process.env.NODE_ENV === "development")
    
    return {
      presets: [
        // Use the preset-env babel plugins
        '@babel/react-env'
      ],
      plugins: [
        // Besides the presets, use this plugin
        '@babel/plugin-proposal-class-properties'
      ]
    }
    
  }

also with .babelrc:

{
  "presets": ["@babel/preset-env","@babel/preset-react"],
  "plugins": [ "@babel/plugin-proposal-class-properties" ]
}

None of this cases are working, also, the .babelrc is on the src folder and the babel.config.js on the root (tried on the src too)

I put the package.json in case you need to check something

{
  "name": "APPNAME",
  "version": "1.63.0",
  "private": true,
  "dependencies": {
    "@apollo/link-context": "^2.0.0-beta.3",
    "@apollo/react-hooks": "^3.1.5",
    "@feathery/react": "^1.1.109",
    "@fullcalendar/core": "^4.4.0",
    "@fullcalendar/daygrid": "^4.4.0",
    "@fullcalendar/interaction": "^4.4.0",
    "@fullcalendar/list": "^4.4.0",
    "@fullcalendar/moment-timezone": "^4.4.0",
    "@fullcalendar/react": "^4.4.0",
    "@fullcalendar/timegrid": "^4.4.0",
    "@loadable/component": "^5.14.1",
    "@sentry/react": "^6.2.5",
    "@sentry/tracing": "^6.2.5",
    "@stripe/react-stripe-js": "^1.1.2",
    "@stripe/stripe-js": "^1.11.0",
    "airtable": "^0.10.1",
    "apollo-boost": "^0.4.9",
    "axios": "^0.21.1",
    "country-region-data": "^1.6.0",
    "graphql": "^15.4.0",
    "graphql.macro": "^1.4.2",
    "intersection-observer": "^0.11.0",
    "lodash": "^4.17.20",
    "moment-duration-format": "^2.3.2",
    "moment-timezone": "^0.5.32",
    "node-sass": "^4.14.0",
    "pubsub-js": "^1.9.1",
    "query-string": "^6.13.7",
    "react": "^18.2.0",
    "react-albus": "^2.0.0",
    "react-app-polyfill": "^2.0.0",
    "react-background-slider": "^2.0.0",
    "react-cookie-consent": "^5.2.0",
    "react-cookiebot": "^1.0.10",
    "react-html-parser": "^2.0.2",
    "react-image-gallery": "^1.0.8",
    "react-instantsearch-dom": "^6.8.2",
    "react-intersection-observer": "^8.30.3",
    "react-multi-carousel": "^2.5.5",
    "react-optimize": "^2.4.0",
    "react-responsive": "^8.1.1",
    "react-safe-html": "^0.6.1",
    "react-scroll": "^1.8.1",
    "react-scrollable-anchor": "^0.6.1",
    "react-tabs": "^3.1.1",
    "react-topbar-progress-indicator": "^4.1.0",
    "react-use-sticky": "^0.1.2",
    "search-insights": "^1.6.3",
    "source-map-explorer": "^2.5.0"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/preset-react": "^7.22.5",
    "@sentry/webpack-plugin": "^1.14.0",
    "@trileuco/eslint-config-triskel": "^0.2.2",
    "compression-webpack-plugin": "^4.0.1",
    "html-replace-webpack-plugin": "^2.5.6",
    "react-app-rewired": "^2.1.6",
    "react-scripts": "^3.4.4"
  },
  "engines": {
    "node": ">=12.12.0 <12.13.0"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "install:app": "npm ci",
    "install:cli": "cd ./packages/APPNAME-cli && npm ci",
    "install:all": "npm run install:app && npm run install:cli",
    "build:analyze": "source-map-explorer build/static/js/*.js",
    "build:app": "npm run build",
    "build:cli": "cd ./packages/APPNAME-cli && npm run build",
    "build:all": "npm run build && npm run build:cli",
    "test": "jest",
    "test:coverage": "jest --coverage",
    "lint": "eslint ./src --ext js --ext jsx",
    "lint:fix": "eslint --fix ./src --ext js --ext jsx"
  },
  "eslintConfig": {
    "extends": "@trileuco/eslint-config-triskel"
  },
  "prettier": "@trileuco/eslint-config-triskel/prettier.config.js",
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx}": [
      "npm run lint:fix",
      "git add"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
Lorenzo Cativiela
  • 1

0 Answers0