NextJS+TS引入npm组件报Module parse failed: unexpected token错误

Next.js默认的Webpack规则不会处理node_modules目录下文件的JSX语法：所有第三方依赖默认都被视为已完成编译的纯JavaScript资源，不会走JSX转译loader。
你安装的promotion-spot包输出的dist产物中保留了.jsx后缀文件，文件内直接包含JSX标签语法，没有提前编译为React.createElement形式的普通JS代码，Webpack解析到尖括号语法时没有对应loader处理，直接抛出解析失败错误。
react-chrono可以正常运行的原因是，它发布到npm的产物已经提前完成了JSX转译，不存在未编译的JSX语法，不需要额外loader处理。

方案1：修复组件库构建配置（推荐） #

这是符合npm包发布规范的永久解决方法，修改promotion-spot仓库的构建配置：

• 构建时开启JSX转译，将所有JSX语法转换为标准JS的React.createElement调用
• 最终输出的产物文件统一使用.js后缀，不要保留.jsx/.tsx后缀
• 确保产物中不包含TS、未转译的ES高版本特性等浏览器或构建工具不能直接识别的语法
  修改完成后重新发布包版本，主项目更新依赖即可正常运行。

方案2：配置Next.js转译指定依赖（临时方案） #

如果暂时无法修改组件库的构建配置，可以手动配置Next.js，让它对promotion-spot包应用JSX转译loader：

• 若使用Next.js 13.1及以上版本，直接在项目根目录的next.config.js中添加transpilePackages配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 原有其他配置项保留
  transpilePackages: ['promotion-spot']
}

module.exports = nextConfig

• 你当前项目使用的是Next.js 12.1.6版本，没有内置transpilePackages能力，需要先安装next-transpile-modules依赖：

npm install next-transpile-modules --save-dev

再修改next.config.js配置：

const withTranspileModules = require('next-transpile-modules')(['promotion-spot']);

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 原有其他配置项保留
}

module.exports = withTranspileModules(nextConfig);

配置完成后重启开发服务、或者重新执行build即可正常加载组件。

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