React JS is not supporting arrow function (ES6 syntax)

Question

I am building a React JS project. In my project, I am using the arrow functions which are the new ES6 syntax. But it is throwing an error when I run the project. I am using Webpack to compile my code.

This is my webpack.config.js file.

const HTMLWebPackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
    entry: [ 'babel-polyfill', './src/index.js' ],
    output: {
        path: path.resolve(__dirname, "build"),
        filename: "bundle.js"
    },
    module:{
        rules:[
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader'],
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ],
    },
    resolve: {
        extensions: ['*', '.js', '.jsx'],
    },
    plugins: [
        new HTMLWebPackPlugin({ template: path.join(__dirname, '/build/index.html') })
    ],
    devServer:{
        port:5200
    }
};

I have .babelrc file right inside the project root folder with the following content.

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

In a React component, I am declaring an arrow function as follow.

addBackDrop = e => {
        if(this.state.showDatePicker && !ReactDOM.findDOMNode(this).contains(e.target)) {
            this.showDatePicker(false);
        }
    }

The function is within the class component.

When I run, "npm run dev", I am getting the following error.

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In C:\Users\Acer\Desktop\way-ui-react\node_modules\babel-preset-es2015\lib\index.js

What is wrong with my configuration and how can I fix it?

Does this help your issue ? stackoverflow.com/a/42064325/11866037 — Kaung Khant Zaw
– Kaung Khant Zaw, Commented Nov 14, 2020 at 15:15
It turns out that it is not the issue with "npm run dev". It runs fine. The issue pops up when it renders the component that is using the arrow function. — Wai Yan Hein
– Wai Yan Hein, Commented Nov 14, 2020 at 15:24
@KaungKhantZaw. I just posted an answer. Cheers for jumping in. That was helpful. — Wai Yan Hein
– Wai Yan Hein, Commented Nov 14, 2020 at 15:46

TalOrlanczyk · Accepted Answer · 2020-11-14 15:23:24Z

1

is this a functional component? if so you need to add const before the function name

edited Nov 14, 2020 at 15:23

answered Nov 14, 2020 at 15:08

TalOrlanczyk

1,2139 silver badges21 bronze badges

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

1 Comment

Wai Yan Hein Over a year ago

No. It is a class component.

Wai Yan Hein · Accepted Answer · 2020-11-14 15:46:12Z

0

This will solve the issue. .babelrc file

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

answered Nov 14, 2020 at 15:46

Wai Yan Hein

15k43 gold badges217 silver badges429 bronze badges

Comments

Sarun UK · Accepted Answer · 2020-11-14 18:27:15Z

0

Hi I think that the issue is that you missed to put the parenthesis " addBackDrop = (e) => "

addBackDrop = (e) => {
        if(this.state.showDatePicker && !ReactDOM.findDOMNode(this).contains(e.target)) {
            this.showDatePicker(false);
        }
    }

edited Nov 14, 2020 at 18:27

Sarun UK

6,7667 gold badges26 silver badges52 bronze badges

answered Nov 14, 2020 at 15:56

Baciu Tudor Stefan

11 bronze badge

1 Comment

Brian Thompson Over a year ago

In most dev setups the parenthesis are not required for single argument arrow functions

Collectives™ on Stack Overflow

React JS is not supporting arrow function (ES6 syntax)

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related