升级react-router-dom至v6后出现TypeError: URL is not a constructor错误求助

我在开发个人项目时，把react-router-dom从v5版本升级到v6后，遇到了TypeError: URL is not a constructor错误，调试许久都没解决，想请教出现该错误的原因。

相关代码 #

App.js #

import React, { useState } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
import StreetNode from "./components/StreetNode";
import Nodes from "./components/Nodes";
import { Scheduler } from "./components/Scheduler";

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>
        {/* <Route path="/" exact component={Nodes} /> */}
        <Route path="/" element={<Nodes />} />
        <Route path="/node/:id" element={<StreetNode />} />
        <Route path="/scheduler" element={<Scheduler />} />
      </Routes>
    </Router>
  );
}

export default App;

index.js #

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { NodeProvider } from "./NodeContext";

ReactDOM.render(
  <NodeProvider>
    <App />
  </NodeProvider>,
  document.getElementById("root")
);

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

package.json #

{
  "name": "lightitup",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.4.2",
    "@date-io/date-fns": "^2.11.0",
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@mui/icons-material": "^5.2.0",
    "@mui/lab": "^5.0.0-alpha.61",
    "@mui/material": "^5.0.2",
    "@mui/styles": "^5.0.1",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.22.0",
    "bootstrap": "^5.1.3",
    "chart.js": "^3.6.2",
    "chartjs-plugin-zoom": "^1.2.0",
    "classnames": "^2.3.2",
    "date-fns": "^2.27.0",
    "react": "^17.0.2",
    "react-chartjs-2": "^4.0.0",
    "react-dom": "^17.0.2",
    "react-google-charts": "^3.0.15",
    "react-notifications-menu": "^1.0.6",
    "react-router-dom": "^6.4.5",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco 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": {
    "autoprefixer": "^9.8.8",
    "postcss": "^7.0.39",
    "react-circular-slider-bar": "^1.3.1",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
  }
}

错误截图 #

错误原因分析及解决方法 #

1. 全局变量URL被污染 #

检查项目代码中是否有自定义变量名和原生URL冲突的情况，比如某个文件里写了var URL = 'xxx'或者let URL = {}，这种写法会覆盖浏览器原生的URL构造函数，导致react-router-dom调用时出错。

• 解决：全局搜索项目中的URL关键词，找到冲突的变量名并修改。

2. 依赖兼容性问题或安装异常 #

虽然react-router-dom 6.4.5支持React 17.x，但react-scripts 4.0.3版本相对较旧，可能存在依赖树冲突；或者node_modules安装时出现损坏。

• 解决：删除node_modules和锁文件，重新安装依赖：

  rm -rf node_modules package-lock.json
  npm install
  

3. 缺失URL API的polyfill #

部分环境（比如旧版Node.js、某些小众浏览器）不支持原生URL构造函数，而react-scripts 4.x默认没有包含这个polyfill，导致react-router-dom内部调用失败。

• 解决：安装并引入whatwg-url polyfill：
  1. 安装依赖：npm install whatwg-url
  2. 在项目入口文件（index.js）顶部添加：

     import 'whatwg-url';
     

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