Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?

发布于 2020-08-20 00:00:00
ReactPropTypesSecret.js:12 Uncaught Invariant Violation: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings. 

在做一个react项目的时候,有一个功能界面在调试状态下不报错,打包压缩后就会报如上错误,这个错误也没有明确提示错误在哪发生的,根据提示打开这个连接后https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]=得到如下结果

The full text of the error you just encountered is:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

根据提示应该是某个组件在实例化的时候发生了错误,但是实在不好确认问题在哪,于是继续分析。经过代码逐行的排查,最后定位问题发生在下面代码处。

  return (
    <LayerListContext.Provider value={layerListContextValue}>
      {currentLayerIds.map((id) => (
        <SlideLayer key={id} id={id}>
          {status == 'edit' ? <LayerItem /> : <LayerSimple/>}
        </SlideLayer>
      ))}
    </LayerListContext.Provider>
  )
const view = currentLayerIds.map((id) => (
    <SlideLayer key={id} id={id}>
      {status == 'edit' ? <LayerItem /> : <LayerSimple/>}
    </SlideLayer>
  ))
  console.log(view)

通过上面的代码执行打印出执行结果发现实例后type属性为undefined,这也是最符合上面报错提示的情况了,那么下面针对这个突破点进行持续分析。

打印出来LayerSimple

console.log(LayerSimple)

ƒ (e){return console.log("LayerSimple",e),l}

//右键此处,选择store as a global variable创建全局变量temp2
temp2
ƒ (e){return console.log("LayerSimple",e),l}
temp2({})

{$$typeof: Symbol(react.element), key: null, ref: null, props: {…}, type: ƒ, …}

上面直接调用temp2发现是可以成功创建出有type的组件实例的,最后将写法换成下面的,不再报错,到这一步已经找到问题的大致原因了,解下来就需要具体的分析底层原因。

 {currentLayerIds.map((id) => (
        <SlideLayer key={id} id={id}>
          {status == 'edit' ? <LayerItem /> : LayerSimple({})}
        </SlideLayer>
      ))}