Next.js npm包含'use client'组件加载时模块解析失败如何解决

算力阿峰

2026-7-15

Next.js npm包中Client Component解析错误的解决办法

核心原因

带'use client'指令的组件构建后，产物里的JSX语法或特殊逻辑没被Next.js的webpack正确处理——默认Next.js不会转译node_modules里的JSX，加上'use client'后触发了特殊解析逻辑，导致报错。

具体解决步骤

1. 调整TypeScript编译配置，转译JSX

如果用tsc编译，默认jsx: preserve会保留JSX输出.jsx文件，Next.js不会处理这类文件。修改tsconfig.json的jsx选项为react-jsx，让TS把JSX转成原生JS调用：

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "outDir": "./dist",
    "declaration": true,
    // 其他原有配置...
  }
}

重新执行npm run build，确保dist里的客户端组件是.js文件，且JSX被转译成_jsx/_jsxs调用。

2. 让Next.js项目转译你的npm包

如果调整编译后还是报错，在使用该包的Next.js项目的next.config.js里添加transpilePackages，指定你的包名，强制Next.js用自身loader处理包内代码：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['你的包名称'],
}

module.exports = nextConfig

3. 检查构建工具配置（如果用Rollup等）

如果不用tsc而是Rollup，要确保配置了处理React/JSX的插件：

安装@rollup/plugin-typescript和@babel/preset-react
在rollup.config.js里配置：

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

export default {
  input: 'src/index.ts',
  output: [
    { dir: 'dist', format: 'esm' },
    { dir: 'dist/cjs', format: 'cjs' }
  ],
  plugins: [
    typescript({ jsx: 'react-jsx' }),
    babel({ babelHelpers: 'bundled', presets: ['@babel/preset-react'] })
  ]
};