Error: Module parse failed, when I build my ReactJS project

Question

When I run npm run build to build the project, it fails. The full error is shown below as I am new to ReactJS and trying to achieve CRUD functionality with Laravel.

I have tried to find the solution from exisitg questions, but no success.

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
| const itemsList = ReactDOM.createRoot(document.getElementById('items-list'));
| root.render(
>  <React.StrictMode>
|     <App />
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
| const itemsList = ReactDOM.createRoot(document.getElementById('items-list'));
| root.render(
>  <React.StrictMode>
|     <App />
|   </React.StrictMode>

Here is my packag.json file:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production",
        "build": "webpack"
    },
    "devDependencies": {
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "webpack": "^5.75.0",
        "webpack-cli": "^5.0.1"
    },
    "dependencies": {
        "react-bootstrap": "^2.7.0"
    }
}

Following webpack.config.js located in the root directory:

const path = require('path');

module.exports = {
  entry: './client/src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  }
};

index.js located in client/scr/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import ListItems from './components/ListItems';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
const itemsList = ReactDOM.createRoot(document.getElementById('items-list'));
root.render(
 <React.StrictMode>
    <App />
  </React.StrictMode>
);
itemsList.render(
  <React.StrictMode>
    <ListItems />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();

App.js located in client/scr/app.js

import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route } from 'react-router-dom';

function App() {  
    return (
      <React.StrictMode>
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <Router>
            <Route exact path="/" component={ListItems} />
            <Route path="/items/new" component={NewItem} />
            <Route path="/items/:id" component={ViewItem} />
            <Route path="/items/:id/edit" component={EditItem} />
          </Router>
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          npm install --save-dev webpack webpack-cli

        </header>
      </div>
    </React.StrictMode> 
  );   
}

export default App;

ListItem.js external component in a component folder

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Table, Button } from 'react-bootstrap';
import ItemModal from './ItemModal.js';
import { Link } from 'react-router-dom';

const ListItems = () => {
  const [items, setItems] = useState([]);
  const [showModal, setShowModal] = useState(false);
  const [selectedItem, setSelectedItem] = useState(null);

  useEffect(() => {
    const fetchItems = async () => {
      const result = await axios.get('/api/items');
      setItems(result.data);
    };
    fetchItems();
  }, []);

  const handleCreate = () => {
    setSelectedItem(null);
    setShowModal(true);
  };

  const handleEdit = (item) => {
    setSelectedItem(item);
    setShowModal(true);
  };
  return (
    <React.StrictMode> 
        <div>
            <Link to="/items/new">Create Item</Link>
            <h1>Items</h1>
            <Button onClick={handleCreate}>Create</Button>
            <Table striped bordered hover>
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                {items.map((item) => (
                    <tr key={item.id}>
                    <td>{item.id}</td>
                    <td>{item.name}</td>
                    <td>
                        <Button onClick={() => handleEdit(item)}>Edit</Button>
                    </td>
                    </tr>
                ))}
                </tbody>
            </Table>
            <ItemModal
                show={showModal}
                onHide={() => setShowModal(false)}
                item={selectedItem}
            />
        </div>
    </React.StrictMode> 
  );
};

export default ListItems;

ItemModal.js external component in a component folder

import React, { useState } from 'react';
import axios from 'axios';
import { Modal, Form, Button } from 'react-bootstrap';

const ItemModal = ({ show, onHide, item }) => {
  const [name, setName] = useState(item ? item.name : '');

  const handleSubmit = async (event) => {
    event.preventDefault();
    if (item) {
      await axios.patch(`/api/items/${item.id}`, { name });
    } else {
      await axios.post('/api/items', { name });
    }
    onHide();
  };

  return (
    <Modal show={show} onHide={onHide}>
      <Modal.Header closeButton>
        <Modal.Title>{item ? 'Edit Item' : 'Create Item'}</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <Form onSubmit={handleSubmit}>
          <Form.Group>
            <Form.Label>Name</Form.Label>
            <Form.Control
              type="text"
              value={name}
              onChange={(event) => setName(event.target.value)}
            />
          </Form.Group>
          <Button type="submit">Save</Button>
        </Form>
      </Modal.Body>
    </Modal>
  );
};

export default ItemModal;

I just want to make it run this app.

Thanks!

Answer 1

It seems you are trying to create an entire React App from scratch. Usually, people use something that generates all the boilerplate code for you. A common one that reactjs.org uses in their tutorial is create-react-app. If you wish to use it, running npx create-react-app <name-of-your-app> will generate all the core dependencies and default configs for webpack and babel for you. You will still probably need to install react-router-dom though.

If you wish to continue on your journey with what you have, the problem is that you are trying to use JSX in your js file and webpack doesn't know how to handle it. You will need a transpiler to convert the jsx into native js code. Babel is the most popular. To have it all work together, here are the steps you need to take:

• npm install -D @babel/core babel-loader @babel/preset-env @babel/preset-react
• It looks like you are trying to use React, ReactDOM, and React Router, but looking at your package.json you have none of those things installed. You will need to do npm install --save react react-dom react-router-dom.
• Now that we have installed everything, we need to configure webpack. In your webpack.config.js, you will need to add the following:

module.exports = {
...<Your stuff>...
module: {
   rules: [
      {
         test:/\.js$/,
         include: path.resolve(__dirname, 'src'),
         loader: 'babel-loader',
         options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
         }
      }
   ]
}

I believe this will get you started.