Build React components library with Webpack 4

Question

I'm currently building a library of React components and bundling it with Webpack 4.

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

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

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.

And here is the related code:

A dumb component from my components library: button/index.js

import React from "react";

const Button = () => <button>Foobar</button>;

export { Button };

The main entry point of my library index.js:

import { Button } from "./src/components/Button";

export { Button };

My Webpack config webpack.config.js:

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: ""
  }
};

And finally, the import of this component in an other application:

import { Button } from "my-design-system";

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.

Answer 1

You're exporting your library as commonjs and trying to import it via import/export syntax. You should change your output to

output: {
  filename: "index.js",
  path: path.resolve(__dirname, "dist"),
  libraryTarget: "umd",
  library: "my-design-system"
}

Found a lot of info here: https://webpack.js.org/guides/author-libraries/