ReactJS项目引入第三方包时出现export语法错误的解决方法

问题详情 #

• React版本：18.2.0
• Node版本：16.17.0
• 项目通过create-react-app创建，基础功能正常，但引入react-leaflet、swiper等第三方包后，浏览器控制台抛出如下异常：

Uncaught SyntaxError: export declarations may only appear at top level of a module [bundle.js]

• 已尝试在package.json中添加"type": "module"配置，问题未得到解决

原因分析 #

项目所依赖的react-scripts版本为0.9.5，该版本配套的Webpack版本过旧，无法正确处理第三方包中的ES模块语法，导致出现上述错误。

解决方案 #

将react-scripts更新至最新版本即可解决问题，执行以下命令完成更新：

# 使用npm更新
npm install react-scripts@latest

# 若使用yarn则执行
yarn add react-scripts@latest

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