启动项目时reactstrap导入报错：无法在模块外使用import语句

错误控制台信息 #

/node_modules/reactstrap/lib/index.js:1
import _Container from './Container';
^^^^^^

SyntaxError: Cannot use import statement outside a module
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1176:20)
at Module._compile (node:internal/modules/cjs/loader:1218:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
at Module.load (node:internal/modules/cjs/loader:1117:32)
at Module._load (node:internal/modules/cjs/loader:958:12)
at Module.require (node:internal/modules/cjs/loader:1141:19)
at require (node:internal/modules/cjs/helpers:110:18)
at Object.reactstrap (/home/rafael/Documentos/dev/academy/.next/server/pages/_app.js:715:18)
at __webpack_require__ (/home/rafael/Documentos/dev/academy/.next/server/webpack-runtime.js:33:42)

Node.js v18.15.0
error Command failed with exit code 1.
info Visit yarnpkg.com/en/docs/cli/run for documentation about this command.

Reactstrap的lib/index.js代码 #

import _Container from './Container';
export { _Container as Container };
import _Row from './Row';
export { _Row as Row };
import _Col from './Col';
export { _Col as Col };
import _Navbar from './Navbar';
export { _Navbar as Navbar };
import _NavbarBrand from './NavbarBrand';
export { _NavbarBrand as NavbarBrand };
import _NavbarText from './NavbarText';
export { _NavbarText as NavbarText };
import _NavbarToggler from './NavbarToggler';
export { _NavbarToggler as NavbarToggler };
import _Nav from './Nav';
export { _Nav as Nav };
import _NavItem from './NavItem';
export { _NavItem as NavItem };
import _NavLink from './NavLink';
export { _NavLink as NavLink };

已尝试操作 #

• 重新安装reactstrap，问题未解决

解决方案 #

方法1：配置Next.js转译reactstrap #

Next.js默认不会转译node_modules里的ES模块，而reactstrap的lib目录输出的是未转译的ES代码，导致服务端渲染时出现CommonJS环境无法识别import的错误。修改next.config.js，将reactstrap加入transpilePackages：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['reactstrap'],
}

module.exports = nextConfig

修改后重启开发服务器即可。

方法2：切换reactstrap的导入路径 #

尝试直接导入reactstrap的ES模块入口，替换原来的导入语句：

// 替换原来的 import { Container, Row } from 'reactstrap'
import { Container, Row } from 'reactstrap/dist/reactstrap.esm'

方法3：检查版本兼容性并更新 #

确保reactstrap版本与你的Next.js版本兼容，执行以下命令更新到最新稳定版：

yarn add reactstrap@latest

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