Webpack Configuration

Merge relies on Webpack to bundle all of the component files. All the code and encoded files are being merged into one bundle sent to UXPin. As a result, your Webpack config has to be built in a way that does not export any external files. For example, do not use mini-css-extract-plugin, but rather rely on style-loader and css-loader to load your CSS into Javascript bundle. For imports of font files or images instead of using file-loader – use url-loader.

If this approach is not compliant with your current Webpack config, please create a separate config for Merge.

Remember to store the location of your Webpack config in UXPin Config file.

module.exports = {
    components: {
        categories: [
            {
                name: "First Category",
                include: [
                    "src/components/FirstComponent/FirstComponent.js",
                    "src/components/SecondComponent/SecondComponent.js"
                ]
            }
        ],
        wrapper: 'src/Wrapper/UXPinWrapper.js',
        webpackConfig: 'webpack.config.js',
    },
    name: "Name of your Library"
}

Basic Webpack Configs

The following config serves a repository where CSS is served via JS (CSS-in-JS library: Emotion) and SVG icons are being inlined and imported into an Icon component:

const path = require('path');
 
module.exports = {
  entry: ['./src/index.js'],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js',
    publicPath: '/',
  },
  resolve: {
    modules: [__dirname, 'node_modules'],
    extensions: ['*', '.js', '.jsx'],
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.svg$/,
        exclude: /node_modules/,
        loader: 'svg-react-loader',
      },
      {
        loader: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/,
      },
      {
        enforce: 'pre',
        test: /\.js$/,
        loader: 'source-map-loader',
      },
    ],
  },
};

The following config serves a repository that uses SASS for styling and inlines SVG icons:

const path = require("path");
const webpack = require("webpack");
 
module.exports = {
    output: {
      path: path.resolve(__dirname, "build"),
      filename: "bundle.js",
      publicPath: "/"
    },
    resolve: {
      modules: [__dirname, "node_modules"],
      extensions: ["*", ".js", ".jsx"]
    },
    devtool: "source-map",
    module: {
      rules: [
        {
          test: /\.svg$/,
          loader: 'svg-react-loader'
        },
        {
          test: /\.(s*)css$/,
          use: [
            {
              loader: 'style-loader'
            },
            {
              loader: 'css-loader',
              options: {
                importLoaders: 2
              }
            },
            {
              loader: 'sass-loader'
            }
          ]
        },
        {
          loader: "babel-loader",
          test: /\.js?$/,
          exclude: /node_modules/,
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          }
        },
        {
          enforce: "pre",
          test: /\.js$/,
          loader: "source-map-loader"
        }
      ]
    }
}