title: HOC import TypeError: Object(...) is not a function
body: <p>I just tried to use a simple HOC with react.
  Here is the function : </p>
  
  <pre><code>import React from "react"
  
  const withOptions = (WrappedComponent) =&gt; {
  
    return class extends React.Component {
  
      render() {
        return &lt;WrappedComponent { ...this.props } /&gt;
      }
    }
  
  }
  
  export default withOptions
  </code></pre>
  
  <p>The problem seems to be in the way i export/import it.</p>
  
  <p>Imported and used in a simple way, it works :</p>
  
  <pre><code>import withOptions from "./Options"
  ...
  
  class BilanClimatique extends React.Component{
    ...
  }
  const StyledBilanClimatique = withStyles(styles)(BilanClimatique)
  export default withOptions(StyledBilanClimatique)
  </code></pre>
  
  <p>But if i use an intermediate file like index.js</p>
  
  <pre><code>import withOptions from "./Options"
  
  export {
    withOptions
  }
  </code></pre>
  
  <p>And import it in my component like that </p>
  
  <pre><code>import {
    withOptions
  } from "./index"
  </code></pre>
  
  <p>Here is what i get</p>
  
  <p><a href="https://i.stack.imgur.com/Hg73K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Hg73K.png" alt="HOC error"></a></p>
  
  <p>Can someone help me understand this ?</p>
  
  <p><strong>EDIT :</strong></p>
  
  <p>I found that the component that is using the HOC is imported from the same file as the HOC :</p>
  
  <pre><code>import withOptions from "./Options"
  import BilanClimatique from "./BilanClimatique"
  
  export {
    withOptions,
    BilanClimatique
  }
  </code></pre>
  
  <p>And that causes the problem, but I don't understand why...
  Here is a sandbox with the problem <a href="https://codesandbox.io/s/r074735yvo" rel="nofollow noreferrer">https://codesandbox.io/s/r074735yvo</a></p>