求助：Next.js无法识别自定义npm包，导入组件时出现编译错误

你遇到的编译错误，核心问题是你的自定义npm包直接发布了未编译的JSX代码。

Next.js的Webpack配置默认只会转译你项目自身的源码，不会处理node_modules目录里的第三方包。而你的Posts.js里包含了JSX语法（<div>List of posts</div>），这种语法浏览器和Webpack默认无法识别，必须通过Babel这类工具转译成普通JavaScript才能被解析。

有两种常见的解决方式，你可以根据需求选择：

方式一：编译你的npm包再发布 #

这是更规范的做法，确保所有使用者都能直接使用，不需要额外配置项目：

• 首先在你的包项目里安装Babel依赖：

  npm install --save-dev @babel/core @babel/preset-react @babel/cli
  

• 在包根目录创建.babelrc配置文件，内容如下：

  {
    "presets": ["@babel/preset-react"]
  }
  

• 在package.json里添加build脚本，指定编译输出目录：

  "scripts": {
    "build": "babel Posts.js -d dist"
  }
  

• 运行npm run build，会生成dist/Posts.js（编译后的纯JS文件）
• 修改package.json的main字段，指向编译后的文件：

  "main": "./dist/Posts.js"
  

• 更新你的包版本（比如npm version patch），重新发布到GitHub Package Registry
• 回到Next.js项目，重新安装包后，直接用import Posts from '@myOwnerName/blog'就能导入使用，不用写具体文件路径

方式二：让Next.js转译你的自定义包 #

如果你不想提前编译包，可以配置Next.js转译指定的第三方包：

• 在Next.js项目根目录创建/修改next.config.js，添加transpilePackages配置：

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

• 重启Next.js开发服务器，此时Webpack会转译你的包中的JSX代码，错误就会消失

• 如果你选择方式一，发布包时要确保dist目录被包含进去，可以在package.json里添加files字段明确指定：

  "files": ["dist", "package.json"]
  

• 避免直接发布未编译的JSX/TSX代码，这会增加使用者的配置成本，也不符合npm包的常规发布规范

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