Next.js导入Bootstrap的JS文件提示找不到声明文件如何解决？

问题根因 #

你遇到的类型报错核心是两个问题：

1. 依赖版本不匹配：你安装的Bootstrap是5.0.0-beta3测试版本，但对应的类型声明包@types/bootstrap是5.1.6正式版，两者接口定义不兼容，类型包无法匹配测试版Bootstrap的导出内容。
2. 动态导入的路径识别问题：直接导入子路径bootstrap/dist/js/bootstrap时，类型声明包默认只映射了bootstrap根导入，不会自动识别深层子路径的类型。

可直接落地的解决方法 #

• 方案1：版本对齐 + 调整导入写法（最推荐）

  1. 先升级Bootstrap到和类型包匹配的正式版，执行命令：

  npm install bootstrap@^5.1.6
  

  2. 修改app.js中的导入逻辑，直接从包名导入，不需要写完整子路径：

  useEffect(() => {
    import('bootstrap')
  }, [])
  

  如果需要用到带Popper的完整Bundle，也可以改成导入bootstrap/dist/js/bootstrap.bundle.min.js，更省心不需要单独管理Popper依赖。

• 方案2：临时忽略类型报错
  如果不想升级Bootstrap版本，可以直接给导入语句加类型忽略标记，跳过当前行的类型检查：

  useEffect(() => {
    // @ts-ignore
    import("bootstrap/dist/js/bootstrap");
  }, []);
  

• 方案3：添加全局类型声明
  如果以上方案都不生效，可以在项目根目录新建declarations.d.ts文件，添加如下内容手动声明该模块的类型：

  declare module 'bootstrap/dist/js/bootstrap' {
    export * from '@types/bootstrap'
  }
  

  之后在tsconfig.json的include数组中添加该声明文件路径即可。

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