title: React Error Boundaries not working with React
body: <p>This is my Error Boundary file -</p>
  <pre><code>class ErrorHandling extends Component {
      state = { hasError: false }
  
      componentDidCatch() {
          this.setState({ hasError: true })
      }
  
      render() {
          // debugger
          if (this.state.hasError) {
              return &lt;div&gt;Error in Component&lt;/div&gt;
          }
          return this.props.children
      }
  }
  </code></pre>
  <p>And the other file is -</p>
  <pre><code>import React, { Component } from 'react';
  
  // Intentionally I have added syntax error below 'd'
  
  function Intermediate(props) {
      return &lt;h1&gt;hi&lt;/h1&gt;;d
  }
  export default Intermediate
  </code></pre>
  <p>And in my App.js</p>
  <pre><code>&lt;ErrorHandling&gt;
    &lt;Intermediate /&gt;
  &lt;/ErrorHandling&gt;
  </code></pre>
  <p>It is causing the application to break without catching the error. Here is the error is seen on the browser screen</p>
  <p><a href="https://i.stack.imgur.com/D4eAV.png" rel="noreferrer"><img src="https://i.stack.imgur.com/D4eAV.png" alt="enter image description here" /></a></p>
  <p>The more detailed version here-
  <a href="https://codepen.io/meghana1991/pen/abojydj?editors=0010" rel="noreferrer">https://codepen.io/meghana1991/pen/abojydj?editors=0010</a></p>
  <p>When I use the same code in my local with multiple files as above listed, it doesn't work</p>