• Register
0 votes
1.4k 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

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 1.1K views
1.1K 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 jwilliam 3.9k points
0 votes
1 answer 272 views
272 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 alecxe 7.5k points
1 vote
1 answer 431 views
431 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 morrisBson 3.2k points
0 votes
1 answer 106 views
106 views
Problem: I have recently started learning about React, Babel, JSX and JS. Now I am receiving an error from a babel if I tried to compile my JSX code into a JS code. Please find the error: “Jsx value should be either an expression or a quoted jsx text.&rdquo ... out in my searching on interenet that prop values should be passed only between {}, but adding these to my code did not help me.
asked Aug 13 Raphael Pacheco 4.9k points
0 votes
1 answer 118 views
118 views
Problem : I am trying to use the reactrouter but i am getting following error because its mime type ('text/html') is not executable, and strict mime type checking is enabled
asked Nov 13, 2019 peterlaw 6.9k points