Laravel：当前未启用对实验语法“classProperties”的支持

Question

In my resource/app.js I require my own written validation script. I get the following warning when compiling ( npm run dev ) my javascript files.

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /resources/js/myvendor/small-form-validator.js: Support for the experimental syntax 'classProperties' isn't currently enabled (2:13):

My Files:

app.js

require('./bootstrap');
require('./myvendor/small-form-validator');

/resources/js/myvendor/small-form-validator.js

class SmallFormValidator {
    errMsgs = {
        required: 'This field is required!',
        string: 'Not valid string.',
        ...

My package.json

    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "bootstrap": "^4.0.0",
        "jquery": "^3.2",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "popper.js": "^1.12",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0"
    }
}

The system complains about the assignment operator (" = " character) after errMsgs = {...}.

Is the problem that I wrote my javascript in Class Style instead of Prototype Style?

Updated

The solution in my case was to create in root an new.babelrc file with the order to load the Babel plugin-proposal-class-properties plugin.

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

See the correct answear from codedge!

Answer 1

You need to create a .babelrc in the root of your project and add

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

Then run npm install --save-dev @babel/plugin-proposal-class-properties to install the package and then npm run watch (respectively npm run dev ) to compile everything.