将useContext封装进Hook打包为CommonJS时返回undefined

可能的原因 #

• Context实例不一致：打包后的库和宿主应用各自持有独立的AContext实例，导致库内的useAContext无法获取到宿主应用中Provider提供的值。这通常是因为Rollup未正确配置外部依赖，将React及Context代码重复打包进库，造成实例隔离。
• Rollup配置缺失：未将React标记为外部依赖，库中包含了独立的React副本，Hook在这个副本环境下运行，无法关联宿主应用的Context Provider。
• 编译变量名错误：编译后的代码中出现了_useAContex（缺少一个t），如果是编译工具篡改变量名，会直接导致取值异常（也可能是笔误，但需排查）。

解决办法 #

1. 修正Rollup配置，隔离React依赖 #

在Rollup配置文件中，将React、ReactDOM标记为外部依赖，避免重复打包：

// rollup.config.js
export default {
  // 其他配置项
  external: ['react', 'react-dom'],
  output: {
    // 其他输出配置
    globals: {
      react: 'React',
      'react-dom': 'ReactDOM'
    }
  }
}

2. 统一Context实例 #

• 库中明确导出AContext，确保宿主应用使用同一实例：

// 库的context文件
import { createContext } from 'react'
export const AContext = createContext(null)

// 库的useAContext实现
import { useContext } from 'react'
import { AContext } from './context'
export const useAContext = () => useContext(AContext)

• 宿主应用导入库的AContext并提供值：

import { AContext, SomeComponent } from 'your-library'

function App() {
  return (
    <AContext.Provider value={{ /* 你的上下文数据 */ }}>
      <SomeComponent />
    </AContext.Provider>
  )
}

3. 排查Babel编译问题 #

检查Babel配置，确保@babel/plugin-transform-react-jsx等插件未错误修改变量名。若为笔误，直接修正编译后的变量名（优先排查工具配置问题）。

4. 验证库的导出与导入 #

确保库的入口文件正确导出相关模块：

// 库入口文件
export { useAContext, SomeComponent } from './components'

宿主应用使用正确的导入方式：

import { useAContext, SomeComponent } from 'your-library'

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