Build React components library with Webpack 4 : <p>I'm currently building a library of React components and bundling it with Webpack 4.</p>

<p>Everything works just fine from building the library's bundle to publishing it on an npm registry.</p>

<p>But then, I'm not able to import any of its components in an other React application and get this error message at runtime:</p>

<blockquote>
  <p>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.</p>
</blockquote>

<p>And here is the related code:</p>

<p>A dumb component from my components library:
<code>button/index.js</code></p>

<pre><code>import React from "react";

const Button = () =&gt; &lt;button&gt;Foobar&lt;/button&gt;;

export { Button };
</code></pre>

<p>The main entry point of my library <code>index.js</code>:</p>

<pre><code>import { Button } from "./src/components/Button";

export { Button };
</code></pre>

<p>My Webpack config <code>webpack.config.js</code>:</p>

<pre><code>const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  entry: "./index.js",
  plugins: [new CleanWebpackPlugin()],
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "dist"),
    libraryTarget: "commonjs",
    library: ""
  }
};
</code></pre>

<p>And finally, the import of this component in an other application:</p>

<pre><code>import { Button } from "my-design-system";
</code></pre>

<p>I guess I'm missing something in my Webpack config or one of the property may be wrong, but after reading multiple posts and tutorials, I can't figure which one.</p>
