CODEWITHSUNDEEP
javascriptlaravelnpmwebpackprototype
Maik Lowrey
Maik Lowrey

Reputation: 17566

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

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!

Upvotes: 1

Views: 565

Answers (1)

codedge
codedge

Reputation: 5174

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.

Upvotes: 3

Related Questions