title: styled-component import results in undefined
body: <p>I'm just getting into <code>styled-components</code> and am having a little bit of an issue. I'm trying to extend a <code>button</code> through different files and for some reason it imports as <code>undefined</code></p>
  
  <p>This error initially appeared with a <code>NavLink</code> component which led to believe it might be a react issue but it also happens with a <code>styled.a``;</code> so I don't think that's it.</p>
  
  <p>StyledComponents.jsx</p>
  
  <pre><code>import styled from 'styled-components';
  
  export const Button = styled.a`
    // general styling
  `;
  </code></pre>
  
  <p>App.jsx</p>
  
  <pre><code>import { Button } from './StyledComponents/StyledComponents';
  
  console.log(Button); // this works fine
  
  export const MainButton = styled(Button)`
    // a little color and other styles
  `;
  </code></pre>
  
  <p>Banner.jsx</p>
  
  <pre><code>import { MainButton } from '../App';
  
  console.log(MainButton); // returns undefined
  
  // if I omit the console logging above, this gives error of undefined
  const _MainButton = styled(MainButton)`
    // specific styles for this component
  `;
  </code></pre>
  
  <p>I am not really sure what is going on. I am also not sure if this is the correct way to layer these styled components. If someone could share some insight, it would be much appreciated!</p>