"loose": true is not fixing Support for the experimental syntax 'classProperties' isn't currently enabled

Question

Support for the experimental syntax 'classProperties' isn't currently enabled

I tried the solutions still get the error after re building.

Support for the experimental syntax 'classProperties' isn't currently enabled

package.json

{
  "name": "blahmodule",
  "version": "1.0.0",
  "description": "a fetch module for our project",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "./node_modules/.bin/babel src --out-file index.js"
  },
  "peerDependencies": {
    "react": "^16.6.6",
    "react-dom": "^16.6.3",
    "axios": "^0.19.0"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "axios": "^0.19.0"
  }
}

.babelrc

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

score 2 · Answer 1 · answered Jul 27 '19 at 10:11

2

I am using plugin-proposal-class-propterties and it works, here is my JSON configuration file .babelrc

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

answered Jul 27 '19 at 10:11

AamirR

11,672
4
59
73

Jack Bashford · Answer 2 · 2019-06-28T20:56:13.470

1

Try making a file babel.config.js and using module.exports to export the configuration. I also believe you don't require the loose option:

babel.config.js:

module.exports = {
  presets: ["@babel/preset-env", "@babel/preset-react"],
  plugins: ["@babel/plugin-proposal-class-propterties"]
};

edited Jun 28 '19 at 20:56

answered Jun 28 '19 at 20:49

Jack Bashford

43,180
11
50
79

im getting `.loose is not a valid Plugin property` – BARNOWL Jun 28 '19 at 20:52
it builds when i take loose out, let me see if this fixes the issue. – BARNOWL Jun 28 '19 at 20:55
So maybe you don't need `loose` with the method I've described above? Hang on, editing... – Jack Bashford Jun 28 '19 at 20:55
the solution still does not fix the `Support for the experimental syntax 'classProperties' isn't currently enabled` – BARNOWL Jun 28 '19 at 20:57

score 0 · Answer 3 · answered Feb 21 '21 at 10:37

you must install

npm install @babel/core @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-react babel-loader

and

change entry and output

const path = require('path')        
module.exports = {
  entry: path.resolve(__dirname,'src', 'app.js'),
  output: {
    path: path.resolve(__dirname, "public","dist",'javascript'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(jsx|js)$/,
        exclude: /node_modules/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                "targets": "defaults"
              }],
              '@babel/preset-react'
            ],
            plugins: [
              "@babel/plugin-proposal-class-properties"
            ]
          }
        }]
      }
    ]
  }
}

"loose": true is not fixing Support for the experimental syntax 'classProperties' isn't currently enabled

3 Answers3

Linked