Vite+React-Bootstrap项目报错：Cannot read properties of undefined (reading 'createContext')

控制台错误详情 #

类型错误 #

react-bootstrap.js:1415 Uncaught TypeError: Cannot read properties of undefined (reading 'createContext')
    at react-bootstrap.js:1415:97
    at react-bootstrap.js:16925:3
    at react-bootstrap.js:16928:12
    at webpackUniversalModuleDefinition (react-bootstrap.js:9:28)
    at react-bootstrap.js:10:3

Source Map加载失败 #

[vite] (client) Failed to load source map for C:/.../Assignments/Full-Stack/client/node_modules/react-bootstrap/dist/react-bootstrap.js.
Error: An error occurred while trying to read the map file at module.js.map
Error: ENOENT: no such file or directory, open 'C:/.../Assignments/Full-Stack/client/node_modules/react-bootstrap/dist/module.js.map'

项目依赖版本 #

• react@19.0.0
• react-dom@19.0.0
• react-bootstrap@2.10.8
• vite@6.0.11
• @vitejs/plugin-react@4.3.4

已尝试的解决动作 #

• 重新安装所有依赖
• 核对React与React-Bootstrap版本兼容性
• 测试两种组件导入方式：

  import { Container } from "react-bootstrap";
  

  import Container from "react-bootstrap/Container";
  

• 在vite.config.js中添加配置：

  optimizeDeps:{include: ["react-bootstrap"]},
  build:{sourcemap: false}
  

问题根源和可行解决办法 #

1. React 19与React-Bootstrap 2.x适配不兼容 #

React 19是较新的正式版本，React-Bootstrap 2.10.8的代码逻辑尚未完全适配React 19的API变动，内部调用createContext时无法找到正确的React导出项，从而触发类型错误。

• 解决：暂时将React和react-dom降级到18.2.0版本，重新安装依赖后再运行项目，大概率能解决类型错误问题。

2. Vite 6.x预构建机制处理异常 #

Vite 6.x的依赖预构建逻辑对React-Bootstrap的打包产物解析存在异常，导致React的全局引用未被正确注入，进而出现createContext未定义的情况。

• 解决：在vite.config.js中添加esbuild相关配置，强制预构建时正确识别React：

  export default defineConfig({
    plugins: [react()],
    optimizeDeps: {
      esbuildOptions: {
        define: {
          global: 'globalThis'
        },
        resolveExtensions: ['.js', '.jsx', '.ts', '.tsx']
      }
    }
  })
  

3. Source Map文件缺失 #

第二个错误是因为react-bootstrap的npm包本身未包含module.js.map文件，或是安装过程中文件损坏丢失。

• 解决：除了设置build.sourcemap: false，还可以在开发环境中直接忽略该包的source map加载，在vite.config.js中添加：

  server: {
    sourcemapIgnoreList: (path) => path.includes('node_modules/react-bootstrap')
  }
  

内容的提问来源于stack exchange，提问作者r.o.s.e