Module build failed on building on class functions

Question

I was previously using the default script of "create-react-app" but the requriement for the project needed me to use WebPack 4 so I needed to create the script and add additional Babel/Webpack in my package.json.

Right now, I'm stuck on running the code:

yarn run v1.19.0
$ webpack --optimize-minimize --config=webpack.min.config.js
Hash: 073756e9eb95ab8e967e
Version: webpack 4.41.0
Time: 46729ms
Built at: 10/29/2019 11:10:55 AM
 2 assets
Entrypoint main = app.bundle.min.js
[15] (webpack)/buildin/global.js 472 bytes {0} [built]
[36] (webpack)/buildin/harmony-module.js 573 bytes {0} [built]
[37] ./src/index.scss 698 KiB {0} [built]
[38] ./src/App.css 380 bytes {0} [built]
[56] ./src/index.js + 74 modules 191 KiB {0} [built]
     | ./src/index.js 590 bytes [built]
     | ./src/store.js 1 KiB [built]
     | ./src/serviceWorker.js 4.6 KiB [built]
     | ./src/App.js 6.4 KiB [built]
     | ./src/reducers/index.js 221 bytes [built]
     | ./src/actions/systemActions.js 1.78 KiB [built]
     | ./src/actions/types.js 833 bytes [built]
     | ./src/reducers/systemReducer.js 1.94 KiB [built]
     | ./src/reducers/partsReducer.js 2.17 KiB [built]
     | ./src/actions/partsActions.js 2.7 KiB [built]
     | ./src/reducers/initialState.js 855 bytes [built]
     |     + 64 hidden modules
    + 53 hidden modules

ERROR in ./src/components/CreateMCRStep1.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\src\components\CreateMCRStep1.js: Support for the experimental syntax 'classProperties' isn't currently enabled (182:38):

  180 |       }
  181 | 
> 182 |     externalComponentValidationCheck = (data, name) => {
      |                                      ^
  183 |     //   console.log("data - " + JSON.stringify(data.target.value))
  184 |     //   console.log("name - " + JSON.stringify(name))
  185 |     switch(name)

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.
    at Object.raise (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:6420:17)
    at Object.expectPlugin (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:7778:18)
    at Object.parseClassProperty (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:11013:12)
    at Object.pushClassProperty (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10978:30)
    at Object.parseClassMemberWithIsStatic (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10917:14)
    at Object.parseClassMember (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10851:10)
    at withTopicForbiddingContext (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10806:14)
    at Object.withTopicForbiddingContext (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:9884:14)
    at Object.parseClassBody (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10783:10)
    at Object.parseClass (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10757:22)
    at Object.parseStatementContent (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10051:21)
    at Object.parseStatement (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10009:17)
    at Object.parseBlockOrModuleBlockBody (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10585:25)
    at Object.parseBlockBody (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10572:10)
    at Object.parseTopLevel (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:9940:10)
    at Object.parse (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:11447:17)
    at parse (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:11483:38)
    at parser (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\lib\transformation\normalize-file.js:168:34)
    at normalizeFile (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\lib\transformation\normalize-file.js:102:11)
    at runSync (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\lib\transformation\index.js:44:43)
    at runAsync (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\lib\transformation\index.js:35:14)
    at process.nextTick (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\lib\transform.js:34:34)
    at process._tickCallback (internal/process/next_tick.js:61:11)
 @ ./src/components/CreateMCRPage.js 28:0-46 145:39-53
 @ ./src/App.js
 @ ./src/index.js

This goes on at least on my 5 components, for some reason it is flagging my class functions and callbacks.

Currently this is my webpack.config.js

    var  path = require('path');
// const MiniCssExtractPlugin = require("mini-css-extract-plugin");


module.exports = {
    entry: './src/index.js',
    mode: 'production',
    output: {
        path: __dirname + './build',
        filename:'app.bundle.js'
    },
    module: {
        rules : [ {
            test: /\.js?$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets:['@babel/react']
                }
            }
        }, 
        {
            test: /\.(sa|sc|c)ss$/,
            use: [
                //    {
                //   // After all CSS loaders we use plugin to do his work.
                //   // It gets all transformed CSS and extracts it into separate
                //   // single bundled file
                //   loader: MiniCssExtractPlugin.loader
                //    }, 
                   {
                     loader: "css-loader"
                   },
                   {
                       // First we transform SASS to standard CSS
                       loader: "sass-loader",
                       options: {
                       implementation: require("sass")
                       }
                   },
                 ]
      },
      {
        // Now we apply rule for images
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
               {
                 // Using file-loader for these files
                 loader: "file-loader",

                 // In options we can set different things like format
                 // and directory to save
                 options: {
                   outputPath: 'images'
                 }
               }
             ]
      }]
    },
    // plugins: [ 
    //   new MiniCssExtractPlugin({
    //  filename: "bundle.css"
    //   })     
    // ]
};

I commented out all my CSS code because I was trying to trace what part in my config is the problem.

My .babelrc looks like this:

{
"presets": [
    "@babel/env",
    "@babel/react"
]
}

I have been trying to solve this for at least 4 hours now and tried multiple setup but nothing work so far.

Franz Justin Buenaventura · Accepted Answer · 2019-10-29 18:29:38Z

0

Apparently I'm wording my issue wrong all this time, arrow function is an actual problem in Webpack and not a config problem.

This solved my problem

Arrow Function syntax not working with webpack?

answered Oct 29, 2019 at 18:29

Franz Justin Buenaventura

3664 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Module build failed on building on class functions

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related