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 ? https://stackoverflow.com/a/42064325/11866037 — Kaung Khant Zaw, Nov 14 '20 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, Nov 14 '20 at 15:24
@KaungKhantZaw. I just posted an answer. Cheers for jumping in. That was helpful. — Wai Yan Hein, Nov 14 '20 at 15:46

TalOrlanczyk · Answer 1 · 2020-11-14T15:23:24.173

1

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

edited Nov 14 '20 at 15:23

answered Nov 14 '20 at 15:08

TalOrlanczyk

1,205
7
21

No. It is a class component. – Wai Yan Hein Nov 14 '20 at 15:13

score 0 · Answer 2 · answered Nov 14 '20 at 15:46

0

This will solve the issue. .babelrc file

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

answered Nov 14 '20 at 15:46

Wai Yan Hein

13,651
35
180
372

score 0 · Answer 3 · edited Nov 14 '20 at 18:27

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 '20 at 18:27

Sarun UK

6,210
7
23
48

answered Nov 14 '20 at 15:56

Baciu Tudor Stefan

1
1

In most dev setups the parenthesis are not required for single argument arrow functions – Brian Thompson Nov 14 '20 at 16:06

React JS is not supporting arrow function (ES6 syntax)

3 Answers3