Next.js集成react-bootstrap报Cannot use import statement outside a module错误

问题原因 #

Next.js为了优化构建性能，默认不会转译node_modules中的大部分第三方包，而bootstrap的部分代码使用了ES模块语法，未被转译时就会抛出该错误；原生React项目的webpack配置默认会处理node_modules的转译，因此不会出现这个问题。

解决方案 #

• 修正组件导入方式
  确保你的NavigationBar组件中只导入react-bootstrap封装好的组件，而非直接引入bootstrap的原生JS文件：

  // 正确写法
  import { Navbar, Nav } from 'react-bootstrap';
  
  // 错误写法（不要这么做）
  import 'bootstrap';
  

• 配置Next.js转译指定包
  在项目根目录的next.config.js中添加transpilePackages配置，让Next.js转译bootstrap和react-bootstrap：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    transpilePackages: ['bootstrap', 'react-bootstrap'],
  };
  
  module.exports = nextConfig;
  

  配置完成后重启开发服务器，让配置生效。

• 确保依赖版本匹配
  react-bootstrap和bootstrap存在版本依赖关系（比如react-bootstrap 2.x需要搭配bootstrap 5.x），版本不兼容也可能引发语法错误。执行以下命令查看当前版本：

  npm list bootstrap react-bootstrap
  

  若版本不匹配，安装对应兼容版本：

  npm install bootstrap@5.3.0 react-bootstrap@2.8.0
  

• 正确引入样式文件
  在_app.tsx中只导入bootstrap的CSS文件即可，无需导入JS文件（react-bootstrap已封装相关逻辑）：

  import 'bootstrap/dist/css/bootstrap.min.css';
  import type { AppProps } from 'next/app';
  
  export default function App({ Component, pageProps }: AppProps) {
    return <Component {...pageProps} />;
  }
  

内容的提问来源于stack exchange，提问作者John Roice M. Aldeza