React项目安装React Router后出现Webpack未找到及module.js报错问题

Let's break down what's going wrong here and fix it step by step, based on the package.json you provided:

Key Issues Identified #

1. Webpack is missing entirely: Your devDependencies are empty—you haven't installed Webpack or its required tools, which explains why you're getting a "Webpack not found" error.
2. No build/start scripts: Your package.json has no commands to run or build your project with Webpack.
3. Missing core React dependencies: You've installed React Router, but you don't have react and react-dom in your dependencies—those are mandatory for any React app.
4. Incomplete CSS handling: You have css-loader installed, but you need style-loader to inject CSS into the browser.

Step 1: Install Missing Dependencies #

First, let's install all the required packages. Run these commands in your project root:

# Install core React libraries
npm install react react-dom

# Install Webpack and dev tools
npm install --save-dev webpack webpack-cli webpack-dev-server

# Install style-loader for CSS handling
npm install --save-dev style-loader

Step 2: Update Your package.json Scripts #

Add these scripts to your package.json so you can run a dev server and build your project:

"scripts": {
  "start": "webpack-dev-server --mode development --open",
  "build": "webpack --mode production",
  "test": "echo \"Error: no test specified\" && exit 1"
}

• npm start will launch a local dev server and open your app in the browser.
• npm run build will create a production-ready bundle in the dist folder.

Step 3: Validate Your Webpack Config #

Make sure your webpack.config.js includes all necessary settings (adjust paths to match your project structure):

const path = require('path');

module.exports = {
  entry: './src/index.js', // Your app's entry file
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader' // Uses your existing Babel setup
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'] // Handles CSS correctly
      }
    ]
  },
  devServer: {
    historyApiFallback: true // Critical for React Router to work with page refreshes
  }
};

Step 4: Double-Check React Router Setup #

Ensure your entry file (e.g., src/index.js) uses React Router correctly. Here's a basic example:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
// Import your components
import Home from './components/Home';
import BookAuthorQuiz from './components/BookAuthorQuiz';

ReactDOM.render(
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/quiz" component={BookAuthorQuiz} />
    </Switch>
  </Router>,
  document.getElementById('root')
);

Step 5: Refresh Dependencies (If Needed) #

If you still run into issues, clear out old dependencies and reinstall:

rm -rf node_modules package-lock.json
npm install

Finally, run npm start—your app should load without the module.js error, and Webpack will be recognized correctly.

内容的提问来源于stack exchange，提问作者Munib Habib