title: TypeScript + React: Element type is invalid: expected a string (for built-in components)
body: <p>I realize that there are several questions related to this error floating around, but as far as I can tell this is a unique situation and not related to an incorrect <code>import</code> statement.</p>
  
  <p>I'm building a <code>React</code> component library with <code>TypeScript</code> and <code>webpack</code>.  </p>
  
  <p>My directory structure:</p>
  
  <pre><code>- src
    - index.ts
    - components
      - Button
        - Button.tsx
        - index.ts
        - Button.css
        - Button.d.css (generated by webpack plugin)
  - package.json
  - tsconfig.json
  - webpack.config.js
  - postcss.config.js
  </code></pre>
  
  <p>My <code>tsconfig.json</code>: </p>
  
  <pre><code>{
    "compilerOptions": {
      "allowSyntheticDefaultImports": true,
      "module": "es2015",
      "target": "es5",
      "lib": ["es6", "dom"],
      "sourceMap": true,
      "allowJs": false,
      "jsx": "react",
      "moduleResolution": "node",
      "rootDir": "src",
      "outDir": "dist",
      "noImplicitReturns": true,
      "noImplicitThis": true,
      "noImplicitAny": true,
      "strictNullChecks": true,
      "declaration": true
    },
    "include": [
      "src/**/*"
    ],
    "exclude": [
      "node_modules",
      "build",
      "dist",
      "scripts",
      "acceptance-tests",
      "webpack",
      "jest",
      "src/setupTests.ts",
      "**/*/*.test.ts",
      "examples"
    ]
  }
  </code></pre>
  
  <p>My <code>webpack.config.js</code>:</p>
  
  <pre><code>const path = require("path");
  const ExtractTextPlugin = require("extract-text-webpack-plugin");
  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  
  module.exports = {
    entry: "./src/index.ts",
    output: {
      path: path.resolve(__dirname, "dist"),
      filename: "index.js"
    },
    mode: "development",
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: "awesome-typescript-loader",
        },
        {
          test: /\.css$/,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: 'typings-for-css-modules-loader',
              options: {
                modules: true,
                namedExport: true,
                banner: "/* This file is generated during the webpack build. Please do not edit/remove. */",
                localIdentName: '[name]__[local]'
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                config: {
                  path: './postcss.config.js'
                }
              }
            }
          ]
        },
        {
          test: /\.(jpg|png|gif|svg)$/,
          use: [
            {
              loader: "file-loader",
              options: {
                name: "[name].[ext]"
              }
            }
          ]
        }
      ]
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
      })
    ],
    devtool: "source-map",
    resolve: {
      extensions: [".js", ".ts", ".tsx", ".css"]
    }
  };
  </code></pre>
  
  <p>My <code>postcss.config.js</code>:</p>
  
  <pre><code>module.exports = {
      modules: true,
      plugins: [
          require('precss'),
          require('postcss-simple-vars'),
          require('autoprefixer'),
          require('postcss-nested'),
      ]
  }
  </code></pre>
  
  <p><code>src/index.ts</code> is simply:</p>
  
  <pre><code>import { Button } from './components/Button';
  
  export {
    Button,
  };
  </code></pre>
  
  <p><code>src/components/Button/index.ts</code>:</p>
  
  <pre><code>import Button from './Button';
  
  export { Button };
  </code></pre>
  
  <p>and <code>src/components/Button/Button.tsx</code>:</p>
  
  <pre><code>import * as React from 'react';
  import { ReactNode } from 'react';
  import { Link } from 'react-router-dom';
  import * as styles from './Button.css';
  
  export interface IButtonPropTypes {
    onClick?: React.MouseEventHandler&lt;any&gt;;
    label: string;
    children?: ReactNode[] | string;
    kind?: 'link' | 'action';
    style?: { [key: string]: string };
    href?: string;
    target?: string;
    className?: string;
  }
  
  export default function Button({
    onClick,
    label,
    children,
    kind = 'action',
    style = {},
    href,
    target,
    className,
  }: IButtonPropTypes) {
    const text = label || children;
    const kindStyle = styles[kind] || '';
    const classes = className || '';
    if (href) {
      return (
        &lt;Link
          className={`${style.btn} ${kindStyle} ${classes}`}
          to={href}
          target={target}
          onClick={onClick}
          style={style}
        &gt;
          &lt;span className={style.background} /&gt;
          &lt;span&gt;{text}&lt;/span&gt;
        &lt;/Link&gt;
      );
    }
  
    return (
      &lt;button className={`${style.btn} ${kindStyle}`} onClick={onClick} style={style}&gt;
        &lt;div&gt;{text}&lt;/div&gt;
      &lt;/button&gt;
    );
  }
  </code></pre>
  
  <p>My <code>dist</code> folder after running <code>webpack</code> looks like:</p>
  
  <pre><code>- dist
    - index.js
    - index.js.map
    - index.d.ts
    - main.css
    - main.css.map
    - components
      - Button
        - Button.d.ts
        - index.d.ts
  </code></pre>
  
  <p>and <a href="https://gist.github.com/adrice727/685ea1abb8ba1dcbe47ef5014f88e4d0" rel="nofollow noreferrer"><code>dist/index.js</code></a> seems to be compiled correctly by <code>webpack</code>.  In <code>package.json</code>, I have:</p>
  
  <pre><code>  "main": "dist/index.js",
    "types": "dist/index.d.ts",
    "files": ["dist"]
  </code></pre>
  
  <p>After running <code>yarn link</code>, I import and use my <code>Button</code> component in a standalone app like so:</p>
  
  <pre><code>import { Button } from 'my-components';
  
  class App extends React.Component {
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;Button label="click me" /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>and receive the following error:</p>
  
  <blockquote>
  <pre><code>Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got:
  </code></pre>
    
    <p>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.</p>
  
  <pre><code>Check the render method of `App`.
  </code></pre>
  </blockquote>
  
  <p>If I remove the <code>Button</code> component, <code>App</code> renders without any errors.</p>
  
  <p><em>Testing by publishing a throwaway module to <code>npm</code> yields the same error.</em></p>
  
  <p>Additionally, if anyone has any suggestions as to better ways to bundle this library, I'd love to hear them as this is my first time using <code>postcss</code>.</p>