React+NextJS引入react-baraja-js遇Module parse failed错误求助

问题根源 #

这个错误是因为react-baraja-js包里使用了未转译的ES6+语法，而NextJS默认不对node_modules目录下的第三方包做转译处理，导致webpack无法解析这些语法，进而抛出解析失败的报错。

解决步骤 #

方法一：配置NextJS转译指定包 #

1. 在项目根目录新建或编辑next.config.js文件，添加如下配置：

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

module.exports = nextConfig

2. 重启NextJS开发服务器，让配置生效。

方法二：清理重复依赖包 #

如果怀疑存在重复包冲突：

• 执行npm ls react-baraja-js（使用yarn则执行yarn list react-baraja-js），查看是否存在多个版本的该包
• 若有重复，删除node_modules文件夹和package-lock.json（yarn环境为yarn.lock），重新执行npm install或yarn install

额外检查项 #

• 若你的NextJS版本低于13.1，transpilePackages配置不生效，需要安装next-transpile-modules插件替代该功能
• 检查cardMenuNav.js中引入包的代码是否正确，示例如下：

import Baraja from 'react-baraja-js';

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