This experimental syntax requires enabling one of the following parser plugin(s): 'classPrivateProperties, classPrivateMethods'

Question

I'm trying to bundle my javascript files using parcel everything is going ok except that I get this problem when I run npm run start

@parcel/transformer-js: This experimental syntax requires enabling one of the following parser plugin(s): 'classPrivateProperties, classPrivateMethods'

after some googling I found out that I need to install the classPrivateProperties and the classPrivateMethods so I did but the same problem occuring here is my package.json file

{
  "name": "starter",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/plugin-proposal-private-methods": "^7.13.0",
    "@babel/plugin-proposal-private-property-in-object": "^7.13.0",
    "@parcel/optimizer-cssnano": "^2.0.0-nightly.612",
    "@parcel/optimizer-htmlnano": "^2.0.0-nightly.612",
    "@parcel/packager-css": "^2.0.0-nightly.612",
    "@parcel/packager-html": "^2.0.0-nightly.612",
    "@parcel/transformer-css": "^2.0.0-nightly.612",
    "@parcel/transformer-html": "^2.0.0-nightly.612",
    "@parcel/transformer-postcss": "^2.0.0-nightly.612",
    "@parcel/transformer-posthtml": "^2.0.0-nightly.612",
    "@parcel/transformer-sass": "^2.0.0-nightly.612",
    "node": "^15.10.0",
    "parcel": "^2.0.0-beta.1",
    "postcss": "^8.2.6",
    "sass": "^1.26.10"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "fractional": "^1.0.0",
    "regenerator-runtime": "^0.13.7"
  },
  "plugins": [
    "@babel/plugin-proposal-private-methods",
    "@babel/plugin-proposal-private-property-in-object"
  ]
}

thanks for your help

Meteorite

Answer 1

If you are talking about Parcel.js, you need to install and configure some Babel plugins, to enable Class Private Properties and Methods:

1. Install this packages with NPM:

   npm i @babel/plugin-proposal-private-methods @babel/plugin-proposal-class-properties

2. Create the .babelrc file at the root folder of your project with this:

    {
      "plugins": [
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-private-methods"
      ]
    }

3. Run Parcel again.

Newbill

Answer 2

I solved this problem by installing the plugins and adding a .babelrc configuration file to the root of my project.

{
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-private-methods"
  ]
}

Handoff