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/

Answer 2

I have created a library on react base component and generating a build file for each components. In a component, I am using a 3rd party library and the problem is, generated build component consist all the functions which is new library however I am using only one.

Thanks

Answer 3

What I would do is to export your components as default and then re-export as named from index.js:

/// Button.js
import React from "react";

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

export default Button ;

// index.js
export { default as Button } from "./src/components/Button";

Then you can do

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

Also make sure you have main set up, pointing to your index.js, in your design system's package.json

Additionally, if you still want to have named exports in some of your components, you can export everything from that component file:

//index.js
export * from "./src/components/ComponentWithNamedExports";

Either way you will make sure there's always one point of export for all your components.

EDIT: As noted in by Maaz Syed Adeeb, you have wrong libraryTarget in your config. I'd remove both libraryTarget and library from there.