Liferay NPM Bundler Standard Preset

2.32.2 · active · verified Tue Apr 21

This package provides a standard configuration preset for `liferay-npm-bundler`, Liferay's specialized tool for bundling npm modules into a format compatible with the Liferay Portal frontend. It aims to simplify the setup for typical Liferay frontend projects by encapsulating common Babel presets, such as `babel-preset-liferay-standard`, and bundler plugins like `liferay-npm-bundler-plugin-replace-browser-modules`. The current stable version, as per the provided context, is 2.32.2. While its specific release cadence isn't explicitly detailed, the `liferay-frontend-projects` monorepo, where this package resides, shows frequent updates across its various components, indicating active maintenance and regular releases. Its key differentiator is its tight integration and specific optimizations for the Liferay Portal environment, handling module resolution, bundling, and compatibility concerns unique to that platform, making it an essential tool for Liferay developers building OSGi-compliant frontend modules.

Common errors

```
Error: No such preset 'liferay-npm-bundler-preset-standard' found.
```
cause The `liferay-npm-bundler-preset-standard` package was not installed, or `liferay-npm-bundler` cannot locate it.

fix Run `npm install --save-dev liferay-npm-bundler-preset-standard` in your project's root directory. Verify that `.npmbundlerrc` correctly specifies the preset name.
```
babel-preset-liferay-standard: Cannot find module '...' 
```
cause A dependency of the preset's underlying Babel configuration is missing or incompatible, often due to an incomplete `npm install` or cache issue.

fix Try clearing your `node_modules` directory and npm cache (`npm cache clean --force`), then reinstall all dependencies (`npm install`). Ensure `liferay-npm-bundler` and `liferay-npm-bundler-preset-standard` are compatible versions.
```
TypeError: Class constructor Bundler cannot be invoked without 'new'
```
cause This error often indicates a version mismatch between `liferay-npm-bundler` and other `liferay-js-toolkit` packages, or a Node.js version incompatibility.

fix Verify that `liferay-npm-bundler` and `liferay-npm-bundler-preset-standard` are using compatible versions. Check the `liferay-frontend-projects` monorepo's release notes for guidance on compatible package versions and supported Node.js environments.

Warnings

gotcha This preset is specifically designed for `liferay-npm-bundler` and the Liferay Portal ecosystem. Using it outside of a Liferay context or with other bundlers will likely result in unexpected behavior or errors due to its specialized configurations and plugins.
Fix: Ensure you are developing for Liferay Portal and using `liferay-npm-bundler` as your module bundler. Consult Liferay's official development guides for proper environment setup.
breaking Updates to underlying tools like Babel presets (e.g., `babel-preset-liferay-standard`) or bundler plugins might introduce breaking changes that are transparently adopted by this preset. Always check the `liferay-frontend-projects` monorepo's changelog for detailed version information related to these transitive dependencies.
Fix: When upgrading major versions of `liferay-npm-bundler` or `liferay-npm-bundler-preset-standard`, thoroughly review the `liferay-frontend-projects` monorepo changelogs for `babel-preset-liferay-standard` and related bundler plugins.
gotcha Compatibility with specific Node.js versions is crucial. The `liferay-frontend-projects` monorepo frequently updates components to support newer Node.js LTS versions (e.g., Node v20 support in `liferay-theme-tasks`). A mismatch can lead to build failures.
Fix: Consult Liferay's official documentation for recommended Node.js versions for your specific Liferay Portal version and the associated frontend tooling. Use a Node.js version manager (e.g., `nvm` or `fnm`) to align your development environment.
gotcha The preset's configuration expects a specific project structure for Liferay modules (e.g., output folder `build/resources/main/META-INF/resources`). Deviations from this structure without custom configuration can lead to deployment issues.
Fix: Adhere to Liferay's recommended module structure or customize the `output` path in your `.npmbundlerrc` file to match your project's layout. Ensure the `create-jar` option is set correctly for your build process.

Install

npm install liferay-npm-bundler-preset-standard npm
yarn add liferay-npm-bundler-preset-standard yarn
pnpm add liferay-npm-bundler-preset-standard pnpm

Quickstart

This quickstart demonstrates how to set up a basic Liferay module, install `liferay-npm-bundler` and its `standard` preset, and configure them via `package.json` and `.npmbundlerrc` to bundle a simple JavaScript file.

// package.json
{
  "name": "my-liferay-module",
  "version": "1.0.0",
  "private": true,
  "devDependencies": {
    "liferay-npm-bundler": "^2.0.0",
    "liferay-npm-bundler-preset-standard": "^2.0.0"
  },
  "scripts": {
    "build": "liferay-npm-bundler"
  }
}

// .npmbundlerrc (create this file in your project root)
{
  "preset": "liferay-npm-bundler-preset-standard",
  "output": {
    "folder": "build/resources/main/META-INF/resources"
  },
  "create-jar": false
}

// src/main.js (example source file)
console.log('Hello from Liferay Bundled Module!');


// Terminal commands to run
// npm install
// npm run build

view raw JSON →