AEM ClientLib Generator Webpack Plugin

1.0.0 verified Sat Apr 25 auth: no javascript

Webpack plugin that integrates aem-clientlib-generator into your webpack build pipeline. It allows generation of AEM Client Libraries (clientlibs) from a single frontend source, supporting dependencies, embeds, and all clientlib properties via a configuration file (clientlib.config.js) or inline options. Version 1.0.0 is stable with moderate release cadence. Key differentiator: seamlessly combines the power of aem-clientlib-generator with webpack's compilation and asset processing, eliminating the need for separate build steps.

Common errors

error Module not found: Can't resolve 'aem-clientlib-generator' ↓

cause Missing peer dependency aem-clientlib-generator

fix

npm install aem-clientlib-generator --save-dev

error TypeError: AemClientlibGeneratorPlugin is not a constructor ↓

cause Incorrect import: using named import instead of default import in ES module context

fix

Use 'const AemClientlibGeneratorPlugin = require('aem-clientlib-generator-webpack-plugin');' or 'import AemClientlibGeneratorPlugin from ...'

error Error: Cannot find module 'clientlib.config.js' ↓

cause No clientlib.config.js found in project root and no options provided

fix

Create clientlib.config.js in project root or pass options object to the plugin.

Warnings

gotcha Plugin requires aem-clientlib-generator to be installed as a dependency. ↓

fix npm install aem-clientlib-generator

gotcha If no options passed, plugin looks for clientlib.config.js in the project root. If missing, it throws an error. ↓

fix Provide options directly or create clientlib.config.js

gotcha All options must be compatible with aem-clientlib-generator's schema. Mistyped option names cause silent failures. ↓

fix Double-check the option names against aem-clientlib-generator documentation.

Install

npm install aem-clientlib-generator-webpack-plugin

yarn add aem-clientlib-generator-webpack-plugin

pnpm add aem-clientlib-generator-webpack-plugin

Imports

AemClientlibGeneratorPlugin

wrong

import AemClientlibGeneratorPlugin from 'aem-clientlib-generator-webpack-plugin';

correct

const AemClientlibGeneratorPlugin = require('aem-clientlib-generator-webpack-plugin');

CommonJS only, as it's a webpack plugin; ESM import may fail due to lack of default export.

AemClientlibGeneratorPlugin (default import)

wrong

import { AemClientlibGeneratorPlugin } from 'aem-clientlib-generator-webpack-plugin';

correct

import AemClientlibGeneratorPlugin from 'aem-clientlib-generator-webpack-plugin';

Package uses module.exports, so default import works in ESM, but named import does not.

Plugin options

wrong

new AemClientlibGeneratorPlugin() // without config and no clientlib.config.js found

correct

new AemClientlibGeneratorPlugin({ /* options */ })

If called with no arguments, it requires a clientlib.config.js file in the project root.

Quickstart

Shows basic webpack configuration with the plugin, including client library definition with assets, dependencies, and serialization.

// webpack.config.js
const AemClientlibGeneratorPlugin = require('aem-clientlib-generator-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new AemClientlibGeneratorPlugin({
      // Options same as aem-clientlib-generator
      basePath: 'dist',
      clientLibRoot: path.resolve(__dirname, 'aem-clientlib'),
      libs: {
        name: 'mylib',
        categories: ['mycategory'],
        dependencies: ['jquery'],
        jsProcessor: ['min:gcc'],
        serialization: 'xml',
        assets: {
          js: ['bundle.js']
        }
      }
    })
  ]
};