title: Webpack + Typscript library import is undefined in React project
body: <p>I am trying to make a React library using Typescript, Webpack and Babel however I am running into a problem. If I build then import the library into a React project then my import is 'undefined' (See the below error). I think this would be because in the <code>bundle.js</code> there is no <code>module.exports</code> for the variable that would represent my class there is only a <code>__webpack_exports__["default"] = (ExampleComponent);</code> (However I am unsure of what this does in practice so I could be wrong.)</p>
  
  <p>I specifically got this error:</p>
  
  <pre><code>Error: 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>
  
  <p>What I have tried:</p>
  
  <ul>
  <li>Changing the tsconfig target to es6 and module to commonjs</li>
  <li>Changing the tsconfig target to es6 and module to esnext</li>
  <li>Changing the tsconfig target to es5 and module to esnext</li>
  <li>Changing the tsconfig target to esnext and module to esnext</li>
  <li>Changing the tsconfig target to es6 and module to es6 </li>
  <li>Changing the tsconfig target to commonjs and module to es6 </li>
  <li>Importing the library as 'import * as ExampleComponent from ...' and 'import {ExampleComponent} from ...' (As intended) both times 'ExampleComponent' was undefined.</li>
  </ul>
  
  <p>Versions:</p>
  
  <ul>
  <li>babel-loader: ^8.1.0</li>
  <li>Webpack: ^4.43.0</li>
  <li>typescript: ^3.8.3</li>
  </ul>
  
  <p>Code:</p>
  
  <p><strong>React Project:</strong></p>
  
  <pre><code>import React from "react";
  import { ExampleComponent } from "test-lib";
  
  // This is always undefined
  console.log(ExampleComponent);
  
  function App() {
      return &lt;ExampleComponent /&gt;;
  }
  
  export default App;
  </code></pre>
  
  <p><strong>Library Project:</strong></p>
  
  <p>index.ts:</p>
  
  <pre><code>import ExampleComponent from './ExampleComponent'
  
  export { ExampleComponent }
  </code></pre>
  
  <p>ExampleComponent.tsx</p>
  
  <pre><code>import * as React from 'react'
  import './ExampleComponent.css'
  
  interface Props {
      text: string
  }
  
  // prettier-ignore
  const ExampleComponent: React.FC&lt;Props&gt; = ({ text }) =&gt; (
      &lt;h1 className="example-text"&gt;{text}&lt;/h1&gt;
  )
  
  export default ExampleComponent
  </code></pre>
  
  <p><strong>Library Configs:</strong></p>
  
  <p>tsconfig.json:</p>
  
  <pre><code>{
      "compilerOptions": {
          "outDir": "dist",
          "module": "esnext",
          "lib": ["dom", "esnext"],
          "moduleResolution": "node",
          "jsx": "react",
          "sourceMap": true,
          "declaration": true,
          "esModuleInterop": true,
          "noImplicitReturns": true,
          "noImplicitThis": true,
          "noImplicitAny": true,
          "strictNullChecks": true,
          "suppressImplicitAnyIndexErrors": true,
          "noUnusedLocals": true,
          "noUnusedParameters": true,
          "allowSyntheticDefaultImports": true,
          "target": "es5",
          "allowJs": true,
          "skipLibCheck": true,
          "strict": true,
          "forceConsistentCasingInFileNames": true,
          "resolveJsonModule": true
      },
      "include": ["src", "tests"],
      "exclude": ["node_modules", "dist", "example"]
  }
  </code></pre>
  
  <p><strong>.babelrc:</strong></p>
  
  <pre><code>{
      "presets": [
          [
              "@babel/preset-env",
              {
                  "debug": true,
                  "useBuiltIns": "usage",
                  "corejs": 3
              }
          ],
          "@babel/preset-react",
          "@babel/preset-typescript"
      ]
  }
  </code></pre>
  
  <p><strong>Webpack Config:</strong></p>
  
  <pre><code>const path = require('path')
  const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
  
  module.exports = {
      entry: {
          bundle: './src/index.ts',
      },
  
      output: {
          path: path.resolve(__dirname, 'dist'),
          filename: '[name].js',
      },
  
      resolve: {
          extensions: ['.tsx', '.ts', '.js', '.json'],
      },
  
      devtool: 'source-map',
  
      module: {
          rules: [
              {
                  test: /\.tsx?$/,
                  exclude: /node_modules/,
                  use: [{ loader: 'babel-loader' }, { loader: 'ts-loader' }],
              },
  
              {
                  test: /\.css$/,
                  loaders: ['style-loader', 'css-loader'],
              },
  
              {
                  test: /\.(gif|png|jpe?g|svg)$/,
                  use: [
                      'file-loader',
                      {
                          loader: 'image-webpack-loader',
                          options: {
                              disable: true,
                          },
                      },
                  ],
              },
  
              {
                  test: /\.js$/,
                  enforce: 'pre',
                  loader: 'source-map-loader',
              },
          ],
      },
  
      plugins: [new ForkTsCheckerWebpackPlugin()],
  }
  </code></pre>
  
  <p>If you want to see the full code here is a link to the <a href="https://github.com/robert-harbison/generator-react-typescript-library/tree/cleanup/generators/app/templates" rel="nofollow noreferrer">Github Repo</a>.</p>