在Chrome扩展中用Vite集成react-router-dom时遇依赖错误求助

我在开发基于React的Chrome扩展，尝试用react-router-dom实现路由，但构建时出现依赖错误。已经试过用MemoryRouter和history包，问题依旧。

内容脚本代码 #

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./src/App";
import "./src/index.css";
import {
  createMemoryRouter,
  RouterProvider,
  Route,
  Link,
} from "react-router-dom";

const router = createMemoryRouter([
  {
    path: "/",
    element: (
      <div>
        <h1>Hello World</h1>
        <Link to="about">About Us</Link>
      </div>
    ),
  },
  {
    path: "about",
    element: <div>About</div>,
  },
]);

let isReactAppAdded = false;  

function removeExistingReactApp() {
  const existingElements = document.querySelectorAll('#tubechat-ai');

  existingElements.forEach((element) => {
    try {
      element.remove();
    } catch (error) {
      console.log("Error in removal ", error.message);
    }
  });
}

function addReactApp() {
  const sideBox_inner = document.getElementById("secondary-inner");
  const videoDurationElements = document.getElementsByClassName('ytp-time-duration');

  console.log("videoBootom",videoDurationElements[0].textContent)
  
  if (sideBox_inner && !isReactAppAdded) { 
    removeExistingReactApp()

    const app = document.createElement("div");
    app.id = "tubechat-ai";
    sideBox_inner.insertBefore(app, sideBox_inner.firstChild);
    ReactDOM.createRoot(document.getElementById("tubechat-ai")!).render(
      <RouterProvider router={router} />
    );

    isReactAppAdded = true
  } else {
    console.log("Not all required elements are present.");
  }
}

document.addEventListener("yt-navigate-finish", addReactApp);
document.addEventListener("DOMContentLoaded", addReactApp);

Vite配置文件 #

import { resolve } from 'path'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  define: {
    'process.env': {}
  },
  build: {
    outDir: resolve(__dirname, 'dist'),
    lib: {
      formats: ['iife'],
      entry: [
        resolve(__dirname, './content.tsx'),
      ],
      name: 'Conntent-Script Vite Configuration'
    },
    
    rollupOptions: {
      output: {
        entryFileNames: '[name].js',
        extend: true,
      }
    }
  }
})

错误说明 #

构建终端出现依赖相关错误，推测问题出在Vite与react-router-dom的配合上。

解决方案 #

1. 调整Rollup依赖处理逻辑

react-router-dom的内部依赖在IIFE构建模式下可能无法正常解析，需要在Vite配置的rollupOptions中添加全局变量映射，并指定依赖入口：

rollupOptions: {
  output: {
    entryFileNames: '[name].js',
    extend: true,
    // 映射react和react-dom到全局变量，避免重复打包
    globals: {
      react: 'React',
      'react-dom': 'ReactDOM'
    }
  },
  resolve: {
    // 直接指定react-router-dom开发版入口，解决Rollup解析问题
    alias: {
      'react-router-dom': 'react-router-dom/dist/react-router-dom.development.js'
    }
  }
}

2. 切换构建格式为ES模块

IIFE格式不适用于react-router-dom的复杂依赖树，改用ES模块并同步更新Chrome扩展配置：
修改Vite的build.lib.formats：

build: {
  outDir: resolve(__dirname, 'dist'),
  lib: {
    formats: ['es'],
    entry: [resolve(__dirname, './content.tsx')],
    name: 'Content-Script Vite Configuration'
  },
  rollupOptions: {
    output: {
      entryFileNames: '[name].js'
    }
  }
}

更新manifest.json的content_scripts配置：

"content_scripts": [
  {
    "matches": ["https://*.youtube.com/*"],
    "js": ["dist/content.js"],
    "type": "module"
  }
]

3. 确保依赖完整安装

执行命令安装react-router-dom及相关依赖：

npm install react-router-dom history

4. 迁移路由逻辑到组件内部

将路由初始化移到App组件中，避免内容脚本顶层执行导致的加载问题：
src/App.tsx：

import { createMemoryRouter, RouterProvider, Route, Link } from "react-router-dom";

export default function App() {
  const router = createMemoryRouter([
    {
      path: "/",
      element: (
        <div>
          <h1>Hello World</h1>
          <Link to="about">About Us</Link>
        </div>
      ),
    },
    {
      path: "about",
      element: <div>About</div>,
    },
  ]);
  return <RouterProvider router={router} />;
}

内容脚本中简化渲染逻辑：

ReactDOM.createRoot(document.getElementById("tubechat-ai")!).render(<App />);

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