liferay-npm-bundler-preset-react

1.8.0 verified Sat Apr 25 auth: no javascript

React preset configuration for liferay-npm-bundler, a build tool for Liferay portlets. Version 1.8.0 is the latest stable release. This preset provides Babel presets and bundler plugins necessary to transpile and bundle React code for Liferay environments, including babel-preset-liferay-standard and liferay-npm-bundler-plugin-replace-browser-modules. Key differentiator: simplifies integration of React into Liferay's module system, handling module replacement and standard JS transformations. Development is ongoing but release cadence is low.

Common errors

error liferay-npm-bundler: The preset "liferay-npm-bundler-preset-react" cannot be found. ↓

cause The preset package is not installed or is not in node_modules.

fix

Run npm install --save-dev liferay-npm-bundler-preset-react.

error Error: Cannot find module 'babel-preset-liferay-standard' ↓

cause Dependency missing due to npm hoisting issues.

fix

Add 'babel-preset-liferay-standard' to your devDependencies explicitly.

error TypeError: Cannot read property 'preset' of undefined ↓

cause Missing .npmbundlerrc file or malformed JSON.

fix

Create a valid .npmbundlerrc with a 'preset' field.

Warnings

breaking Preset requires liferay-npm-bundler version that supports 'preset' configuration. ↓

fix Update liferay-npm-bundler to a compatible version (e.g., >=2.0.0).

deprecated Use of this preset may be superseded by newer Liferay build tools (e.g., liferay-js-toolkit). ↓

fix Consider migrating to liferay-js-toolkit for ongoing support.

gotcha If using React 17+ or 18+, the bundled react and react-dom versions may be outdated. ↓

fix Manually specify newer React versions in .npmbundlerrc's 'imports' section.

gotcha Preset assumes a Liferay environment; not intended for generic React projects. ↓

fix Use a standard React build tool (e.g., Create React App) for non-Liferay projects.

Install

npm install liferay-npm-bundler-preset-react

yarn add liferay-npm-bundler-preset-react

pnpm add liferay-npm-bundler-preset-react

Imports

liferay-npm-bundler-preset-react
wrong
```
import preset from 'liferay-npm-bundler-preset-react'
```
correct
```
Add 'liferay-npm-bundler-preset-react' as a value for the 'preset' key in .npmbundlerrc. No JavaScript import needed.
```
This package is not imported in JavaScript; it is configured declaratively in .npmbundlerrc. The preset is loaded by liferay-npm-bundler during build.

Babel Presets

wrong

Manually specifying babel presets in .babelrc

correct

Babel presets are included automatically by the preset; no manual import required.

The preset manages all Babel configuration. Overriding may conflict with preset's plugins.

Plugins

wrong

Adding liferay-npm-bundler-plugin-replace-browser-modules individually to .npmbundlerrc

correct

Plugins are included automatically by the preset; no manual configuration needed.

The preset already includes this plugin; adding it again may cause duplication errors.

Quickstart

Shows installation and configuration of preset in .npmbundlerrc, including specifying React dependencies.

// Ensure liferay-npm-bundler is installed:
npm install --save-dev liferay-npm-bundler
// Install this preset:
npm install --save-dev liferay-npm-bundler-preset-react
// Create .npmbundlerrc in project root:
cat > .npmbundlerrc <<EOF
{
  "preset": "liferay-npm-bundler-preset-react",
  
  "config": {
    "imports": {
      "react": "^16.0.0",
      "react-dom": "^16.0.0"
    }
  }
}
EOF
// Run build:
npm run build