错误：模块解析失败，当我构建我的 ReactJS 项目时

Question

当我运行npm run build来构建项目时，它失败了。 完整的错误如下所示，因为我是 ReactJS 的新手，并试图通过 Laravel 实现 CRUD 功能。

我试图从 exisitg 问题中找到解决方案，但没有成功。

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>

这是我的packag.json文件：

{
    "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"
    }
}

以下webpack.config.js位于根目录：

const path = require('path');

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

index.js位于 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位于 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外部组件

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外部组件

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;

我只想让它运行这个应用程序。

谢谢！

Answer 1

看来您正在尝试从头开始创建整个 React App。 通常，人们会使用为您生成所有样板代码的工具。 reactjs.org 在他们的教程中使用的一个常见的是 create-react-app。 如果你想使用它，运行npx create-react-app <name-of-your-app>将为你生成 webpack 和 babel 的所有核心依赖项和默认配置。 你仍然可能需要安装 react-router-dom。

如果你想继续你的旅程，问题是你正试图在你的 js 文件中使用 JSX，而 webpack 不知道如何处理它。 您将需要一个转换器来将 jsx 转换为本机 js 代码。 Babel 是最受欢迎的。 要使它们协同工作，您需要执行以下步骤：

• npm install -D @babel/core babel-loader @babel/preset-env @babel/preset-react
• 看起来您正在尝试使用 React、ReactDOM 和 React Router，但查看您的 package.json，您没有安装这些东西。 您将需要执行npm install --save react react-dom react-router-dom 。
• 现在我们已经安装了所有东西，我们需要配置 webpack。在你的 webpack.config.js 中，你需要添加以下内容：

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

我相信这会让你开始。