Babel.js 当捆绑到commonJS时,将useContext Package 在挂接中将返回undefined

xpcnnkqh  于 2022-12-08  发布在  Babel
关注(0)|答案(2)|浏览(159)

问题:代码在绑定时停止工作。我有一个使用上下文的钩子和一个使用该钩子的组件:

const useAContext = () => {
  return useContext(AContext)
}
    
const SomeComponent = () => {
  const aContextProps = useAContext()
  ...
}

这工作正常,没有错误。
捆绑之后(使用rollup和babel),我得到了下面的编译代码:

var useAContext = function useAContext() {
  return useContext(AContext);
};

var SomeComponent = function SomeComponent(_ref) {
  var _useAContex = useAContext();
  ...
};

我有一个应用程序,然后使用编译后的代码作为一个库包,并给我一个错误,说_useAContex是未定义的。代码被捆绑到cjs,所以我的想法是,cjs不知道如何处理通过一个挂钩传递上下文。主要是寻找一个解释这种行为,但也希望有一个变通办法。

lymgl2op

lymgl2op1#

这花了我几个小时的调试,但我找到了一个解决方案。原来捆绑不是问题所在。
我在不知不觉中尝试使用上下文,而没有首先设置提供上下文属性的提供者:facepalm:
如果其他人遇到这个问题,请确保您在使用上下文的呈现树上方的某个位置有一个Context.Provider。

oalqel3c

oalqel3c2#

我知道你已经找到了解决办法,但我还是会把我的答案贴出来:
如果上下文未定义,通常会抛出一个错误。这有助于调试。

const useAContext = () => {
  const context useContext(AContext)
  if (!context) {
    throw new Error('useAContext must be used inside AcontextProvider')
  }
  return context
}

相关问题