{"id":13445,"library":"liferay-npm-bundler-loader-babel-loader","title":"Liferay npm Bundler Babel Loader","description":"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.","status":"deprecated","version":"2.32.2","language":"javascript","source_language":"en","source_url":"https://github.com/liferay/liferay-frontend-projects","tags":["javascript"],"install":[{"cmd":"npm install liferay-npm-bundler-loader-babel-loader","lang":"bash","label":"npm"},{"cmd":"yarn add liferay-npm-bundler-loader-babel-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add liferay-npm-bundler-loader-babel-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"The core loader that integrates Babel with build systems. Required for this Liferay-specific loader to function.","package":"babel-loader","optional":false},{"reason":"The core Babel library. Typically a peer dependency of babel-loader and necessary for any Babel transformation.","package":"@babel/core","optional":false},{"reason":"Common Babel preset to transpile modern JavaScript into compatible versions based on target environments. Users install specific presets based on their needs.","package":"@babel/preset-env","optional":true},{"reason":"Babel preset for transforming JSX syntax in React applications. Users install specific presets based on their needs.","package":"@babel/preset-react","optional":true}],"imports":[{"note":"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.","symbol":"loader: babel-loader","correct":"{\n  \"test\": \"\\\\.js$\",\n  \"exclude\": \"node_modules\",\n  \"use\": [\n    {\n      \"loader\": \"babel-loader\",\n      \"options\": { /* ... */ }\n    }\n  ]\n}"}],"quickstart":{"code":"{\n\t\"rules\": [\n\t\t{\n\t\t\t\"test\": \"\\\\.js$\",\n\t\t\t\"exclude\": \"node_modules\",\n\t\t\t\"use\": [\n\t\t\t\t{\n\t\t\t\t\t\"loader\": \"babel-loader\",\n\t\t\t\t\t\"options\": {\n\t\t\t\t\t\t\"presets\": [\"@babel/preset-env\", \"@babel/preset-react\"]\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t]\n}","lang":"json","description":"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."},"warnings":[{"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'.","message":"The `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.","severity":"breaking","affected_versions":">=2.0.0"},{"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).","message":"Ensure 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Only use loaders specifically designed for or compatible with `liferay-npm-bundler`. Do not attempt to reuse Webpack loaders directly.","message":"Incompatibility 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"Transitive 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.","severity":"gotcha","affected_versions":"<2.32.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Install `babel-loader` as a development dependency: `npm install --save-dev babel-loader`.","cause":"The `babel-loader` package is not installed as a dependency in the project.","error":"Module not found: Error: Can't resolve 'babel-loader'"},{"fix":"Install the missing preset: `npm install --save-dev @babel/preset-env` (or the specific preset/plugin that caused the error).","cause":"A specified Babel preset (e.g., `@babel/preset-env`) is missing from the project's dependencies.","error":"Error: Cannot find module '@babel/preset-env'"},{"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.","cause":"Babel is encountering syntax it doesn't know how to transpile, likely due to a missing or misconfigured Babel preset/plugin in `.npmbundlerrc` options.","error":"Syntax Error: Unexpected token (some_character) at (line:column)"},{"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.","cause":"The `test` regular expression in your `.npmbundlerrc` rule for `babel-loader` does not match the file path, or the `exclude` pattern is too broad.","error":"Liferay NPM Bundler: No rule found for '/path/to/your/file.js'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null}