创建Next.js通用组件库后引入报错的问题求助

错误原因 #

你碰到的问题是因为发布到NPM的组件是未编译的JSX源码，而Next.js默认不会对node_modules目录下的文件进行编译处理。Webpack无法识别JSX语法（这里的<>是React Fragment的简写），所以抛出了"Unexpected token"的解析错误。

解决方案 #

方案一：组件库端编译后发布（推荐）

通用组件库应该发布编译后的兼容代码，而不是源码，这样所有使用方都无需额外配置。步骤如下：

1. 安装打包工具（以Rollup为例）：

npm install rollup @rollup/plugin-babel @babel/preset-react @babel/preset-env --save-dev

2. 在组件库根目录创建rollup.config.js配置文件：

import babel from '@rollup/plugin-babel';

export default {
  input: 'src/lib/component/TextBox.js', // 你的组件入口文件
  output: [
    {
      file: 'dist/index.cjs.js',
      format: 'cjs' // CommonJS格式，兼容Node环境
    },
    {
      file: 'dist/index.esm.js',
      format: 'esm' // ES模块格式，支持Tree Shaking
    }
  ],
  plugins: [
    babel({
      presets: ['@babel/preset-react', '@babel/preset-env'],
      exclude: 'node_modules/**'
    })
  ],
  external: ['react'] // 把React标记为外部依赖，避免打包进去
};

3. 修改组件库的package.json：
   • 添加打包脚本和预发布钩子：

   "scripts": {
     "build": "rollup -c",
     "prepublishOnly": "npm run build"
   }
   

   • 指定编译后的入口文件，并声明要发布的文件：

   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "files": [
     "dist"
   ]
   

4. 执行打包并重新发布：

npm run build
npm publish

方案二：在Next.js项目中配置编译目标包

如果暂时不想修改组件库，可以让Next.js主动编译这个第三方包：

1. 在Next.js项目根目录创建/修改next.config.js：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['sc-test-lib-1'], // 指定要编译的包名
};

module.exports = nextConfig;

2. 重启Next.js开发服务器，错误即可消除。

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