安装react-router-dom及React项目服务器启动失败问题求助

1. 安装依赖后的输出情况 #

执行npm install react-router-dom后得到以下输出：

已更新至最新版本，5秒内完成1469个包的审计

226个包正在寻求资助
运行npm fund查看详情

6个高风险漏洞

2. 项目中的App.js代码 #

import React, { useEffect, useState } from 'react';
import about from './MyComponents/about.js';
import Header from './MyComponents/Header.js';
import Todos from './MyComponents/Todos';
import Footer from './MyComponents/Footer';
import { AddTodo } from './MyComponents/AddTodo';
import './App.css';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

function App() {
  let initTodo;
  if (localStorage.getItem("todos") === null) {
    initTodo = [];
  } else {
    initTodo = JSON.parse(localStorage.getItem("todos")) // takes a JSON string and then transforms it into a JavaScript object
  }
  const mytitle = "My-Todos-List" // This should be a const is non-editable
  const [todos, setTodo] = useState(initTodo); // here I use lazy initialization. I leave you a link below to read about it

  useEffect(() => {
    localStorage.setItem("todos", JSON.stringify(todos));
  }, [todos])

  // and then you can write your handlers that use `useState` todos and setTodo without warnings
  const onDelete = (todo) => {
    setTodo(todos.filter((e) => {
      return e !== todo;
    }))
    localStorage.setItem("todos", JSON.stringify(todos)); // takes a JavaScript object and then transforms it into a JSON string.
  }

  const addTodo = (title, desc) => {
    let sno;
    if(todos.length == 0) {
      sno = 1;
    } else {
      sno = todos[todos.length - 1].sno + 1
    }
    const mytodo = {
      sno: sno,
      title: title,
      description: desc
    }
    setTodo([...todos, mytodo]);
  }
  
  return (
    <>
      <Router>
        <Header title1={mytitle} searchBar={true}/>
        <Switch>
          <Route
            exact
            path="/"
            render={() => {
              return (
                <>
                  <AddTodo addtodo={addTodo} />
                  <Todos todos={todos} onDelete={onDelete} />
                </>
              )
            }}
          >
          </Route>
          <Route exact path="/about">
            <About />
          </Route>  
        </Switch>
        <Footer />
      </Router>
    </>
  );
  // I want to render my header and footer all the time but not addtodo and todos because I want to render them when slash / is my end point
}

export default App;

3. 服务器启动报错信息 #

node:internal/modules/cjs/loader:998
  throw err;
  ^

错误：找不到模块'@babel/plugin-syntax-class-properties'
Require stack:
- D:\React projects\todos-list\node_modules\@babel\preset-env\lib\available-plugins.js
- D:\React projects\todos-list\node_modules\@babel\preset-env\lib\filter-items.js
- D:\React projects\todos-list\node_modules\@babel\preset-env\lib\index.js
- D:\React projects\todos-list\node_modules\workbox-build\build\lib\bundle.js
- D:\React projects\todos-list\node_modules\workbox-webpack-plugin\build\generate-sw.js
- D:\React projects\todos-list\node_modules\workbox-webpack-plugin\build\index.js
- D:\React projects\todos-list\node_modules\react-scripts\config\webpack.config.js
- D:\React projects\todos-list\node_modules\react-scripts\scripts\start.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:995:15)
    at Module._load (node:internal/modules/cjs/loader:841:27)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (D:\React projects\todos-list\node_modules\@babel\preset-env\lib\available-plugins.js:8:36)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1061:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'D:\\React projects\\todos-list\\node_modules\\@babel\\preset-env\\lib\\available-plugins.js',
    'D:\\React projects\\todos-list\\node_modules\\@babel\\preset-env\\lib\\filter-items.js',
    'D:\\React projects\\todos-list\\node_modules\\@babel\\preset-env\\lib\\index.js',
    'D:\\React projects\\todos-list\\node_modules\\workbox-build\\build\\lib\\bundle.js',
    'D:\\React projects\\todos-list\\node_modules\\workbox-webpack-plugin\\build\\generate-sw.js',
    'D:\\React projects\\todos-list\\node_modules\\workbox-webpack-plugin\\build\\index.js',
    'D:\\React projects\\todos-list\\node_modules\\react-scripts\\config\\webpack.config.js',
    'D:\\React projects\\todos-list\\node_modules\\react-scripts\\scripts\\start.js'
  ]
}

4. 已知代码问题 #

App.js中存在组件导入与使用的大小写不一致：导入的是about，但使用时写的是<About />。

解决方案 #

步骤1：修复Babel依赖缺失问题 #

服务器启动报错是因为缺少@babel/plugin-syntax-class-properties模块，执行以下命令安装：

npm install @babel/plugin-syntax-class-properties --save-dev

如果安装后仍有问题，建议清理缓存并重新安装所有依赖：

# 删除node_modules和lock文件
rm -rf node_modules package-lock.json
# 清除npm缓存
npm cache clean --force
# 重新安装依赖
npm install

步骤2：修复组件大小写问题 #

修改App.js中的导入语句，保持与组件使用时的大小写一致（符合React组件首字母大写的规范）：

// 原导入
// import about from './MyComponents/about.js';
// 修改为
import About from './MyComponents/about.js';

步骤3：处理安装依赖后的漏洞提示 #

安装react-router-dom后的输出并非错误：

• 包资助提示：是npm的正常提示，可忽略或执行npm fund查看详情，不影响项目运行。
• 高风险漏洞：可执行npm audit fix尝试自动修复，若无法自动修复，需查看漏洞详情并手动调整对应依赖版本。

内容的提问来源于stack exchange，提问作者fahad khurshid