• Register
0 votes
1.9k 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 1.7K views
1.7K 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 351 views
351 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 706 views
706 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 343 views
343 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, 2020 Raphael Pacheco 4.9k points
0 votes
1 answer 194 views
194 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
1 vote
1 answer 711 views
711 views
Problem: I have very basic knowledge about Webpack. Now a days I am facing three warning messages when the importing request in the barebone webpack project. Please find below the messages which I am facing: Critical dependency: the request of a dependency is an ... to resolve them statically and also the imports of the entire package. Please help me in fixing the above webpack related error.
asked May 25, 2020 Martin K 6.6k points
0 votes
1 answer 1.7K views
1.7K views
Problem : I am very new to gulp. I am facing following gulp error My gulpfile.js var mygulp = require('gulp'); var mysource = require('vinyl-source-stream'); var mybrowserify = require('browserify'); var mybabelify = require("babelify"); var mywatch = require('gulp ... 'import' and 'export' may appear only with 'sourceType: module' I am unable to understand the error. How can I resolve this error?
asked Jan 28, 2020 jwilliam 3.9k points
0 votes
2 answers 921 views
921 views
Problem : Facing below error: Unhandled Rejection (Error): Actions must be plain objects. Use custom middleware for async actions. I wanted to add comments with all posts. So when fetch posts are run I want to call fetch comment API for every post. export function ... API.fetchComments(postAllId).then(comments => {     return {       type: BIND_COMMENTS,       comments,       posAlltId     }  }) }
asked Jan 17, 2020 jwilliam 3.9k points
0 votes
1 answer 84 views
84 views
Problem: I am naive to Angular, Webpack, Bootstrap and typescript. I have tried to write a service but it is throwing the below error while my app is bootstrapping. I am currently using ng2 2.4.2 and the angular-cli 1.0.0-beta.24. My TypeError as below: “Uncaught typeerror: ... .navigate(['/project', query]); } public extractData(res: Response) { let body = res.json(); return body || {}; } }
asked Sep 3, 2020 Raphael Pacheco 4.9k points
1 vote
1 answer 424 views
424 views
Problem : I am naïve to Webpack. As the Webpack does not support the native webworker syntax so currently I want to use a worker-loader npm module but because of some unknown reason t I am facing the below weird error. Cannot assign to read only property 'exports ... but still unable to understand the root cause of above error. Now I am in badly need of the expert advice to fix above error.
asked Apr 9, 2020 morrisBson 3.2k points