• Register
0 votes
2.6k views

Problem :

While I was trying to set up the React within Django project I came across below error

ModuleBuildError in Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: C:\Users\jwilliam\Cebula3\cebula_react\assets\js\index.js: Support for the experimental syntax 'classProperties' isn't currently enabled (17:9):
  15 | 
  16 | class BodyPartWrapper extends Component {
> 17 |   state = {
     |         ^
  18 | 
  19 |   }
  20 | 

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 
'plugins' section of your Babel config to enable transformation.

So, I tried to install the @babel/plugin-proposal-class-properties and put this in babelrc

Babelrc as below:

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

But the above error is still existed, How can I fix the error??

7 5 2
3,870 points

Please log in or register to answer this question.

1 Answer

0 votes

Solution :

Please Change the below code:

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

To following code

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

This worked for me

 OR

I just solve above problem by just adding @babel/plugin-proposal-class-properties into the webpack config plugin. A module section of my webpack.config.js looks like below

module: {
    rules: [
        {
            test: path.join(__dirname, '.'),
            exclude: /(node_modules)/,
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env',
                          '@babel/react',{
                          'plugins': ['@babel/plugin-proposal-class-properties']}]
            }
        }
    ]
}
9 7 4
38,600 points

Related questions

0 votes
1 answer 14 views
14 views
Problem: Can anyboady help me in solving this? Support for the experimental syntax 'classproperties' isn't currently enabled.
asked Mar 7 Wafa Abu Yousef 6.1k points
0 votes
1 answer 11 views
11 views
Problem: I can’t fix this issue, can anyone tell me why: Error: plugin/preset files are not allowed to export objects, only functions.
asked Mar 13 Wafa Abu Yousef 6.1k points
0 votes
1 answer 2.3K views
2.3K views
Problem : I have a carousel file in which I want to get my index.js and build the block.build.js, and my webpack.config.js But I face below error message: ERROR in ./index.js Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions. Does anyone know the solution on this?
asked Jan 18, 2020 jwilliam 3.9k points
0 votes
1 answer 409 views
409 views
Problem : I have the React project using the Webpack and Babel. When I created it on the office computer, my Webpack ran fine. But when I cloned my project onto the personal computer, it gave me below error : ERROR in ./ ... native) at OptionManager.resolvePresets (/Users/alecxe/Desktop/w6d5/minesweeper/node_modules/babel-core/lib/transformation/file/options/option-manager.js:269:20)
asked Jan 7, 2020 alecxe 7.5k points
1 vote
1 answer 935 views
935 views
Problem : Currently I am trying to learn the Node, Webpack , Babel. I have recently joined a new project so need to learn these three technologies. Now I am facing below error while trying to build my project. “Module build failed (from ./node_modules/babel-loader/lib/index.js)”. ... .7.0", "webpack": "^4.17.1", "webpack-dev-server": "^3.1.7" } Please guide me in fixing above error.
asked Mar 31, 2020 morrisBson 3.2k points
0 votes
1 answer 4 views
4 views
Problem: Below settings for my package.json If I run from command line npm test all jest test cases are executed properly. In case I use directly the command jest from command line I receive this error: TypeError: Path must be a string. Received undefined
asked Apr 2 ummesalma 25.2k points
0 votes
1 answer 21 views
21 views
Problem: you may need an appropriate loader to handle this file type
asked Feb 17 Dan phillip 4.8k points
0 votes
1 answer 3 views
3 views
Problem: Anyone know map is function react or not if anyone can help me on this i will really appreciate it, can anyone?
asked 2 days ago niyatiry 3.2k points
0 votes
1 answer 3 views
3 views
Problem: When I run yarn run start or yarn run build, Webpack reports to have built the bundle fine. When I run the application in the browser, I get the Uncaught ReferenceError: React is not defined error. Please help me solving this error.
asked 3 days ago anika11 4.1k points
0 votes
1 answer 68 views
68 views
Problem : failed to load external module babel register
asked Feb 25 Shovo210 13.8k points