giuseppeg / react-layers-manager

📚 Manage layers and z-index in React applications effectively

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Error message unclear

veroo-m opened this issue · comments

const { container } = render(
  <div>
    <someLayeredComponent {...defaultProps} />
  </div>,
)

While rendering this element I would get this error

'Error: Uncaught [TypeError: Cannot read property 'host' of undefined]' 
' console.error node_modules/react-dom/cjs/react-dom.development.js:17117
    The above error occurred in the <Context.Consumer> component:
        in Layer (created by Modal)
        in Modal
    
    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://fb.me/react-error-boundaries to learn more about error boundaries.'

The error logged in unclear as it doesn't specify that the error comes from the usage if this library, nor it's mentioned that the component should be rendered as:

const { container } = render(
  <LayersManager>
    <someLayeredComponent  {...defaultProps} />
  </LayersManager>,
)

Yeah this is because you are using a consumer (Layer) without a provider (LayersManager) and so the consumer cannot destructure its value (which in this case is undefined)

<Consumer>
{({ host, root }) =>

Right now I create a single version of the library and don't make distinction between production and development, so I can't add a dev only warning. Maybe we can add the check all the time.

I will leave this issue open and see if the issue comes up again and in case add the fix above.

Thank you Veronica for reporting this!