Registry / web-framework / liferay-npm-bundler-loader-babel-loader

liferay-npm-bundler-loader-babel-loader

library2.32.2jsnpmunverified

The `liferay-npm-bundler-loader-babel-loader` package is a specialized loader designed for the Liferay npm bundler, enabling the transformation of source files using Babel within Liferay DXP frontend module build processes. As of version 2.32.2, it provides a crucial bridge for Liferay developers to leverage modern JavaScript features, JSX, and TypeScript (via Babel) by applying Babel transformations defined through `.npmbundlerrc` rules. It is part of the larger `liferay-frontend-projects` monorepo, which generally sees continuous development and frequent updates across its various components, though specific release cadences for individual loaders like this one are tied to the broader toolkit updates. Its primary differentiation is its tight integration into the Liferay build toolchain, offering a streamlined path for compiling modern frontend code for deployment within the Liferay ecosystem.

web-framework

npm install liferay-npm-bundler-loader-babel-loader

github ↗package ↗

INSTALL

IMPORT

SIG · LIFERAY-NPM-BUNDLE

liferay-npm-bundler-loader-babel-loader

web-frameworkjavascriptv2.32.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

loader: babel-loader

✓ { "test": "\\.js$", "exclude": "node_modules", "use": [ { "loader": "babel-loader", "options": { /* ... */ } } ] }

This package acts as a loader configured in a `.npmbundlerrc` file and does not export symbols for direct JavaScript/TypeScript import or CommonJS require. Its integration is purely configuration-driven within the Liferay npm bundler's build rules. The 'babel-loader' string refers to this package.

Demonstrates the essential configuration for `liferay-npm-bundler-loader-babel-loader` in a `.npmbundlerrc` file, applying Babel with `env` and `react` presets to JavaScript files.

{ "rules": [ { "test": "\\.js$", "exclude": "node_modules", "use": [ { "loader": "babel-loader", "options": { "presets": ["@babel/preset-env", "@babel/preset-react"] } } ] } ] }

Debug

Known issues

breakingThe `liferay-npm-bundler` itself, which this loader extends, has been deprecated as of Liferay 2024.Q4/Portal GA129 and is planned for future removal. Projects should migrate to standard JavaScript tooling like esbuild, webpack, or Vite and browser modules.

fix

Plan to migrate your Liferay frontend projects away from `liferay-npm-bundler` and its associated loaders to modern, standard JavaScript bundlers and build tools. Refer to Liferay documentation on 'Moving from AMD to Browser Modules in Liferay DXP'.

affects: >=2.0.0

gotchaEnsure all necessary Babel presets and plugins (e.g., `@babel/preset-env`, `@babel/preset-react`) are installed as `devDependencies` in your project. This loader only orchestrates Babel, it doesn't provide the Babel transforms themselves.

fix

Run `npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react` (adjust presets/plugins as per your project's needs).

affects: >=1.0.0

gotchaIncompatibility with Webpack loaders: The `liferay-npm-bundler` mechanism, while inspired by Webpack, creates AMD-targeted bundles and its loaders are not directly compatible with standard Webpack loaders.

fix

Only use loaders specifically designed for or compatible with `liferay-npm-bundler`. Do not attempt to reuse Webpack loaders directly.

affects: >=1.0.0

gotchaTransitive dependency issues can break builds. An older issue involved a breaking change in `globby` which required `liferay-npm-bundler` to update. Keep `liferay-npm-bundler` and its loaders updated.

fix

Ensure `liferay-npm-bundler` is at version `2.32.1` or later to mitigate known transitive dependency issues. Regularly update frontend tooling to avoid similar problems.

affects: <2.32.1

Errors

Common errors & fixes

Module not found: Error: Can't resolve 'babel-loader'

The `babel-loader` package is not installed as a dependency in the project.

fix

Install `babel-loader` as a development dependency: `npm install --save-dev babel-loader`.

Error: Cannot find module '@babel/preset-env'

A specified Babel preset (e.g., `@babel/preset-env`) is missing from the project's dependencies.

fix

Install the missing preset: `npm install --save-dev @babel/preset-env` (or the specific preset/plugin that caused the error).

Syntax Error: Unexpected token (some_character) at (line:column)

Babel is encountering syntax it doesn't know how to transpile, likely due to a missing or misconfigured Babel preset/plugin in `.npmbundlerrc` options.

fix

Review your `babel-loader` options in `.npmbundlerrc` and ensure all necessary presets (e.g., `react` for JSX, `typescript` for TypeScript) and plugins are correctly specified and installed.

Liferay NPM Bundler: No rule found for '/path/to/your/file.js'

The `test` regular expression in your `.npmbundlerrc` rule for `babel-loader` does not match the file path, or the `exclude` pattern is too broad.

fix

Adjust the `test` regex in your `.npmbundlerrc` to correctly match the files you intend to process, and verify the `exclude` pattern isn't unintentionally preventing files from being handled.

Upgrade

Version history

2.32.2latest on npm

Audit

Dependencies

babel-loaderrequiredThe core loader that integrates Babel with build systems. Required for this Liferay-specific loader to function.

@babel/corerequiredThe core Babel library. Typically a peer dependency of babel-loader and necessary for any Babel transformation.

@babel/preset-envoptionalCommon Babel preset to transpile modern JavaScript into compatible versions based on target environments. Users install specific presets based on their needs.

@babel/preset-reactoptionalBabel preset for transforming JSX syntax in React applications. Users install specific presets based on their needs.

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/liferay/liferay-frontend-projects ↗

packagehttps://www.npmjs.com/package/liferay-npm-bundler-loader-babel-loader ↗