react-router-dom@5.2.1导入Link触发CommonJS与ES模块版本冲突如何解决

错误：你在已经运行ES模块构建版本的页面上加载了React Router的CommonJS构建版本，程序将无法正常运行。

该报错本质是项目运行环境采用ES模块规范，但加载的react-router-dom@5.2.1版本使用了CommonJS规范的构建产物，两种模块规范混用导致冲突，可按以下顺序尝试解决：

• 清理依赖缓存后重装
  先删除项目根目录下的node_modules文件夹、package-lock.json（npm用户）或yarn.lock（yarn用户）文件，之后重新执行npm install或yarn install即可。多数情况下是依赖拉取过程中缓存了异常构建产物导致的冲突，重装即可解决。
• 升级react-router-dom到v5系列最新稳定版
  v5.2.1存在已知的模块导出兼容问题，升级到v5系列的最新小版本不会出现API不兼容问题，可直接执行命令：

  npm install react-router-dom@5.3.4
  

• 适配打包工具的模块配置
  若使用Vite作为打包工具，Vite默认优先加载ES模块，需要在vite.config.js中添加react-router-dom的预构建配置：

  export default {
    // 其余原有配置保持不变
    optimizeDeps: {
      include: ['react-router-dom']
    }
  }
  

  若使用Webpack作为打包工具，检查webpack.config.js中resolve.mainFields配置，确保优先加载module字段对应的ES模块入口：

  module.exports = {
    // 其余原有配置保持不变
    resolve: {
      mainFields: ['module', 'browser', 'main']
    }
  }
  

• 临时兼容方案
  若上述方案都无法生效，可以直接指定导入react-router-dom的ES模块路径：

  import { Link } from 'react-router-dom/es'
  

额外注意点 #

你代码中Link组件的to属性填写的"main"建议改为"/main"，和Route中定义的path保持一致，避免路径匹配异常。

内容的提问来源于stack exchange，提问作者김승용