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

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

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.