Accepted answer

Looking at the webpack config, I could see that, UI kit is getting bundled with react included which might be causing the issue.

To avoid this you could use webpack externals.

The externals configuration option provides a way of excluding dependencies from the output bundles. Instead, the created bundle relies on that dependency to be present in the consumer's environment. This feature is typically most useful to library developers, however there are a variety of applications for it.

So you could update UI Kit webpack config to not include react and the peerDependencies should take care of the dependency handling for any consumers of the library.

Updated webpack.config

const path = require("path");
module.exports = {
  mode: "production",
  entry: "./src/index.js",
  output: {
    path: path.resolve("dist"),
    filename: "index.js",
    libraryTarget: "commonjs2"
  module: {
    rules: [
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        use: "babel-loader"
        test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
        use: [
            loader: "file-loader",
            options: {
              name: "[name].[ext]",
              limit: 10000,
              mimetype: "application/font-woff"
  resolve: {
    alias: {
      components: path.resolve(__dirname, "src/components/"),
      utils: path.resolve(__dirname, "src/utils/"),
      themes: path.resolve(__dirname, "src/themes/")
    extensions: [".js", ".jsx"]
  externals: {
        // Use external version of React
        react: "react"
  devtool: false

I have published a test package to confirm this (react-ui-kit-dontuse).

Demo links

v0.0.21(Without webpack externals)

v0.0.23(With webpack externals)

Source code of test package:

Hope this helps!

Related Query

More Query from same tag