title: Error when importing react component from a git repo dependancy: Element type is invalid
body: <p>I am trying to build react shared ui component library and add it as a dependency in another react project (created with create-react-app). However, I am getting an error when I try to import the Button component. Reading similar questions, it looks like something to do with the way am importing or exporting but can't resolve it yet.</p>
  
  <p>Error on the app consuming the shared component:</p>
  
  <pre><code>Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
  </code></pre>
  
  <pre><code>// App.js 
  import React from "react";
  import { Button } from "my-component-ui-library";
  import "./App.css";
  
  function App() {
    return (
      &lt;div className="App"&gt;
          &lt;Button&gt;Hello World!&lt;/Button&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p>Folder structure in the shared component library (omitted other irrelevant files)</p>
  
  <pre><code>.
  ├── src
  │   ├── components
  │   │   └── Button
  │   │       ├── Button.js
  │   │       └── index.js
  │   └── index.js
  ├── .babelrc
  └── webpack.config.js
  
  </code></pre>
  
  <p>Code</p>
  
  <pre><code>// src/components/Button/Button.js
  import React from "react";
  import PropTypes from "prop-types";
  
  const Button = ({ children, bg }) =&gt; (
    &lt;button
      style={{
        padding: "10px 20px",
        border: "none",
        color: "white",
        fontSize: "16px",
        background: bg
      }}
    &gt;
      {children}
    &lt;/button&gt;
  );
  
  Button.propTypes = {
    children: PropTypes.node.isRequired,
    bg: PropTypes.string
  };
  
  Button.defaultProps = {
    bg: "#24a7fd"
  };
  
  export default Button;
  
  // src/components/Button/index.js
  import Button from "./Button";
  
  export default Button;
  
  // src/components/index.js
  export { default as Button } from "./Button";
  
  
  //.babelrc
  {
    "presets": ["@babel/preset-env", "@babel/preset-react"]
  }
  
  // webpack.config.js
  module.exports = {
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env", "@babel/react"]
            }
          }
        }
      ]
    }
  };
  
  // package.json
  {
    "name": "my-component-ui-library",
    "version": "1.0.0",
    "description": "",
    "main": "dist/main.js",
    "scripts": {
      "build": "webpack",
      "prepare": "npm run build"
    }
  }
  
  </code></pre>