我做了一个汽车应用。我想为sars创建编辑表单。我写了这几行代码：

import React, { useContext, useEffect, useReducer, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { toast } from 'react-toastify';
import axios from 'axios';
import { Store } from '../Store';
import { getError } from '../utils';
import Container from 'react-bootstrap/Container';
import Form from 'react-bootstrap/Form';
import { Helmet } from 'react-helmet-async';
import LoadingBox from '../components/LoadingBox';
import MessageBox from '../components/MessageBox';
import Button from 'react-bootstrap/Button';

const reducer = (state, action) => {
  switch (action.type) {
    case 'FETCH_REQUEST':
      return { ...state, loading: true };
    case 'FETCH_SUCCESS':
      return { ...state, loading: false };
    case 'FETCH_FAIL':
      return { ...state, loading: false, error: action.payload };
    case 'UPDATE_REQUEST':
      return { ...state, loadingUpdate: true };
    case 'UPDATE_SUCCESS':
      return { ...state, loadingUpdate: false };
    case 'UPDATE_FAIL':
      return { ...state, loadingUpdate: false };
    case 'UPLOAD_REQUEST':
      return { ...state, loadingUpload: true, errorUpload: '' };
    case 'UPLOAD_SUCCESS':
      return {
        ...state,
        loadingUpload: false,
        errorUpload: '',
      };
    case 'UPLOAD_FAIL':
      return { ...state, loadingUpload: false, errorUpload: action.payload };

    default:
      return state;
  }
};
export default function CarEditScreen() {
  const navigate = useNavigate();
  const params = useParams(); // /car/:id
  const { id: carId } = params;

  const { state } = useContext(Store);
  const { userInfo } = state;
  const [{ loading, error, loadingUpdate }, dispatch] =
    useReducer(reducer, {
      loading: true,
      error: '',
    });

  const [mark, setMark] = useState('');
  const [model, setModel] = useState('');
  

  useEffect(() => {
    const fetchData = async () => {
      try {
        dispatch({ type: 'FETCH_REQUEST' });
        const { data } = await axios.get(`/api/cars/${carId}`);
        setMark(data.mark);
        setModel(data.model);
        
        dispatch({ type: 'FETCH_SUCCESS' });
      } catch (err) {
        dispatch({
          type: 'FETCH_FAIL',
          payload: getError(err),
        });
      }
    };
    fetchData();
  }, [carId]);

  const submitHandler = async (e) => {
    e.preventDefault();
    try {
      dispatch({ type: 'UPDATE_REQUEST' });
      await axios.put(
        `/api/cars/${carId}`,
        {
          _id: carId,
          mark,
          model,
          
        },
        {
          headers: { Authorization: `Bearer ${userInfo.token}` },
        }
      );
      dispatch({
        type: 'UPDATE_SUCCESS',
      });
      toast.success('Product updated successfully');
      navigate('/admin/cars');
    } catch (err) {
      toast.error(getError(err));
      dispatch({ type: 'UPDATE_FAIL' });
    }
  };
 
  
  return (
    <Container className="small-container">
      <Helmet>
        <title>Edit Product ${carId}</title>
      </Helmet>
      <h1>Edit Product {carId}</h1>

      {loading ? (
        <LoadingBox></LoadingBox>
      ) : error ? (
        <MessageBox variant="danger">{error}</MessageBox>
      ) : (
        <Form onSubmit={submitHandler}>
          <Form.Group className="mb-3" controlId="name">
            <Form.Label>Name</Form.Label>
            <Form.Control
              value={mark}
              onChange={(e) => setMark(e.target.value)}
              required
            />
          </Form.Group>
          <Form.Group className="mb-3" controlId="slug">
            <Form.Label>Slug</Form.Label>
            <Form.Control
              value={model}
              onChange={(e) => setModel(e.target.value)}
              required
            />
          </Form.Group>
         
          <div className="mb-3">
            <Button disabled={loadingUpdate} type="submit">
              Update
            </Button>
            {loadingUpdate && <LoadingBox></LoadingBox>}
          </div>
        </Form>
      )}
    </Container>
  );
}

字符串
当我进入浏览器并单击“编辑”按钮时，我会出现以下错误：

Class constructor Alert cannot be invoked without 'new'
TypeError: Class constructor Alert cannot be invoked without 'new'
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:45140:22)
    at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:48426:17)
    at beginWork (http://localhost:3000/static/js/bundle.js:49722:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:34732:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:34776:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:34833:35)
    at beginWork$1 (http://localhost:3000/static/js/bundle.js:54707:11)
    at performUnitOfWork (http://localhost:3000/static/js/bundle.js:53954:16)
    at workLoopSync (http://localhost:3000/static/js/bundle.js:53877:9)
    at renderRootSync (http://localhost:3000/static/js/bundle.js:53850:11)

型
我不知道，有什么问题。你能帮我吗？
我添加package.json的代码：{

"name": "frontend",
  "proxy": "http://localhost:5000",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.4.0",
    "bootstrap": "^5.1.3",
    "react": "^18.2.0",
    "react-bootstrap": "^2.7.4",
    "react-dom": "^18.2.0",
    "react-google-charts": "^4.0.0",
    "react-helmet-async": "^1.3.0",
    "react-router-bootstrap": "^0.26.2",
    "react-router-dom": "^6.11.0",
    "react-scripts": "5.0.1",
    "react-toastify": "^9.1.3",
    "use-reducer-logger": "^1.0.2",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.21.5",
    "@babel/core": "^7.22.1",
    "@babel/preset-env": "^7.22.4"
  }
}

型
是巴别塔的事吗？我可以在package.json文件中写些什么来解决这个问题？