{"id":15682,"library":"liferay-npm-bundler-preset-reactjs","title":"Liferay npm Bundler React Preset","description":"The `liferay-npm-bundler-preset-reactjs` package, currently at stable version 2.0.1, provides a pre-configured solution for integrating React applications with the Liferay Portal ecosystem. It functions as a configuration preset for the `liferay-npm-bundler`, streamlining the setup by including necessary Babel presets like `babel-preset-liferay-standard` and Liferay-specific plugins such as `liferay-npm-bundler-plugin-replace-browser-modules`. This preset is designed to adapt standard React development workflows for Liferay's widget-based architecture and its unique AMD loading mechanism. It handles complexities like package namespacing for module isolation and facilitates dependency sharing across multiple widgets, which differentiates it from generic bundlers like Webpack that produce single JavaScript files. While the preset itself is stable, the underlying `liferay-npm-bundler` is officially deprecated as of Liferay 2024.Q4/Portal GA129 and is slated for removal, encouraging developers to transition to standard JavaScript build tools like esbuild or Webpack for future projects. This impacts the long-term relevance and future release cadence of this preset, which is now primarily in a maintenance or deprecated state.","status":"deprecated","version":"2.0.1","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","liferay","npm-bundler","preset","react","react-preset"],"install":[{"cmd":"npm install liferay-npm-bundler-preset-reactjs","lang":"bash","label":"npm"},{"cmd":"yarn add liferay-npm-bundler-preset-reactjs","lang":"bash","label":"yarn"},{"cmd":"pnpm add liferay-npm-bundler-preset-reactjs","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[],"quickstart":{"code":"# 1. Create a new Liferay-compatible project structure (example)\nmkdir my-react-widget\ncd my-react-widget\nnpm init -y\n\n# 2. Install the React preset as a dev dependency\nnpm install --save-dev liferay-npm-bundler-preset-reactjs\n\n# 3. Create a .npmbundlerrc file in your project root to use the preset\necho '{ \"preset\": \"liferay-npm-bundler-preset-reactjs\" }' > .npmbundlerrc\n\n# 4. Create a simple React component file (e.g., src/main/resources/META-INF/resources/index.js)\nmkdir -p src/main/resources/META-INF/resources\ncat << EOF > src/main/resources/META-INF/resources/index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nconst App = () => {\n  return (\n    <div>\n      <h1>Hello from Liferay React Widget!</h1>\n      <p>This component is bundled using liferay-npm-bundler-preset-reactjs.</p>\n    </div>\n  );\n};\n\n// For Liferay portlets, components are often rendered into a specific DOM element\n// and exported as a function for Liferay to invoke.\nclass MyReactPortlet extends React.Component {\n    render() {\n        return <App />;\n    }\n}\n\nexport default function(portletId) {\n    ReactDOM.render(<MyReactPortlet />, document.getElementById(portletId));\n}\nEOF\n\n# 5. Add React and ReactDOM as development dependencies\nnpm install --save-dev react react-dom\n# Note: In a deployed Liferay DXP environment, React/ReactDOM are often provided as shared libraries.\n# The bundler is designed to inject peer dependencies if needed.\n\n# 6. (Optional) Run the Liferay npm bundler (requires 'liferay-npm-bundler' to be installed globally or as a dev dep)\n# npm install -g liferay-npm-bundler\n# liferay-npm-bundler\n","lang":"shell","description":"Demonstrates how to set up a basic Liferay widget project to utilize the `liferay-npm-bundler-preset-reactjs` for automatic Babel transpilation and Liferay-specific bundling of a simple React component for deployment."},"warnings":[{"fix":"Review the Liferay documentation on 'Changes Between Bundler 1.x and 2.x' to understand new behaviors regarding module formatting, dependency isolation, and peer dependency handling.","message":"The `liferay-npm-bundler` (the core tool this preset configures) underwent significant changes from v1.x to v2.x. Version 2.x introduced automatic AMD `define()` wrapping, package name prefixing for isolation, and improved peer dependency support. Projects migrating from older bundler versions may experience changes in module resolution and dependency management.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Plan to migrate existing projects away from `liferay-npm-bundler` to modern build tools. For new projects, avoid using `liferay-npm-bundler` and its presets entirely, opting for standard JavaScript build chains compatible with Liferay DXP's browser module support.","message":"The `liferay-npm-bundler` itself is officially deprecated as of Liferay 2024.Q4/Portal GA129 and is planned for future removal. Liferay recommends migrating to standard JavaScript tooling like esbuild, Vite, or Webpack using ES Modules (ESM) for new and existing projects, as this offers better performance and a more modern development experience.","severity":"deprecated","affected_versions":">=2.0.1"},{"fix":"Ensure your Liferay development environment and `liferay-npm-bundler` toolchain are up-to-date. If issues persist, verify the Babel versions used by `liferay-npm-bundler`'s internal loaders and consider manually aligning Babel configurations or upgrading Liferay's JS tooling.","message":"Older versions of the Babel loader used by `liferay-npm-bundler` (e.g., `liferay-npm-bundler-loader-babel-loader`) might have used Babel 6 internally. This can cause compatibility issues when attempting to use `@babel/` scoped presets and plugins designed for Babel 7+ with this preset.","severity":"gotcha","affected_versions":"<=2.0.0"},{"fix":"Utilize Liferay's 'Shared Bundle' feature or explicitly configure `liferay-npm-bundler` to consume React from a common OSGi bundle. Ensure all widgets consuming React are configured to use the same shared version to optimize loading and avoid conflicts.","message":"While the bundler handles some aspects of shared dependencies, effectively managing shared libraries like React across multiple Liferay widgets to prevent duplicate downloads and version conflicts still requires careful strategy. Improper handling can lead to performance degradation and larger bundle sizes.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure `react` and `react-dom` are properly declared as `devDependencies` in your `package.json`. Confirm that the `liferay-npm-bundler` processed your project successfully and generated the necessary `META-INF/resources` structure with React. If using Liferay's shared library feature, verify React is deployed and accessible as a global module.","cause":"The React library was not correctly loaded or made available in the browser context where your Liferay widget attempts to render. This often happens if the `liferay-npm-bundler` failed to bundle/inject React, or if React is expected as a shared library but is missing.","error":"Uncaught ReferenceError: React is not defined"},{"fix":"Avoid mixing Webpack configurations with `liferay-npm-bundler`. If you must use Webpack, configure it independently and then integrate its output into the Liferay development workflow without relying on `liferay-npm-bundler` for the actual bundling process. Alternatively, consider fully migrating to standard build tools as recommended by Liferay.","cause":"This is a conceptual incompatibility rather than a direct error message. `liferay-npm-bundler` has its own loader and plugin system, inspired by Webpack but designed specifically for Liferay's AMD-based widget architecture, not for generating single JS bundles. Attempting to apply Webpack-specific configurations or loaders directly will fail.","error":"Webpack and liferay-npm-bundler loaders are not compatible."}],"ecosystem":"npm"}