title: React: How to import a node module that creates a React element?
body: <p>I have 2 repos:</p>
  
  <ol>
  <li>my main web app</li>
  <li>my shared component library, being imported as a node module through package.json</li>
  </ol>
  
  <p>Both of them use React. In my main web app, I'm just importing the component files of my shared component library directly like so:</p>
  
  <p>Switch.js (in my shared component library)</p>
  
  <pre><code>import React from 'react';
  import { Switch } from 'antd';
  import styled from 'styled-components';
  import { CloseOutlined, CheckOutlined } from '@ant-design/icons';
  
  const StyledSwitch = styled(Switch).attrs({
    checkedChildren: &lt;CheckOutlined /&gt;,
    unCheckedChildren: &lt;CloseOutlined /&gt;
  })``;
  
  export default StyledSwitch;
  </code></pre>
  
  <p>My main web app:</p>
  
  <p><code>import Switch from 'my-shared-component-lib/components/Switch';</code></p>
  
  <p>However, I'm getting this error:</p>
  
  <pre><code>../my-shared-component-lib/components/Switch.js
  SyntaxError: /Users/edmundmai/Documents/src/my-shared-component-lib/components/Switch.js: Unexpected token (9:19)
  
     7 | 
     8 | const StyledSwitch = styled(Switch).attrs({
  &gt;  9 |   checkedChildren: &lt;CheckOutlined /&gt;,
       |                    ^
    10 |   unCheckedChildren: &lt;CloseOutlined /&gt;
    11 | })`
    12 |   &amp;.ant-switch {
  </code></pre>
  
  <p>Is there something I have to install so that my imports will work?</p>