Problem with ReactDataGrid and webpack transpile

Question

I am trying to build a ReactDataGrid component. The jsx file for the component is copied from the data grid's website examples:

import React from 'react';
import ReactDataGrid from 'react-data-grid';

const columns = [
    { key: 'id', name: 'ID' },
    { key: 'title', name: 'Title' },
    { key: 'count', name: 'Count' } ];

const rows = [{id: 0, title: 'row1', count: 20}, {id: 1, title: 'row1', count: 40}, {id: 2, title: 'row1', count: 60}];

function HelloWorld() {
    return (<ReactDataGrid
        rows={}
        columns={columns}
        rowGetter={i => rows[i]}
        rowsCount={3}
        minHeight={150} />);
}

And the webpack.config.js file is:

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: './reader/static/worklist.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.(js | \.jsx)$/,
                loader: "babel-loader",
                exclude: ['/node_modules/', '/public/'],
            }
        ]
    }
};

When I run 'npm run build' from the command line, I receive the following error:

Module parse failed: Unexpected token (12:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
 
 function HelloWorld() {
     return (<ReactDataGrid
         rows={}
         columns={columns}

Can someone help me out? I am new to transpiling as well as react.

Thanks!

Answer 1

The issue was the syntax of the regular expression. Instead of:

test: /\.(js | \.jsx)$/,

it should be:

test: /\.(js|jsx)$/,