{"id":18493,"library":"liferay-npm-bundler-preset-react","title":"liferay-npm-bundler-preset-react","description":"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.","status":"active","version":"1.8.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install liferay-npm-bundler-preset-react","lang":"bash","label":"npm"},{"cmd":"yarn add liferay-npm-bundler-preset-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add liferay-npm-bundler-preset-react","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This preset configures liferay-npm-bundler and requires it to be installed as a peer dependency.","package":"liferay-npm-bundler","optional":false},{"reason":"Transpiles standard JavaScript features required by Liferay.","package":"babel-preset-liferay-standard","optional":false},{"reason":"Replaces browser-specific modules with Liferay-compatible implementations.","package":"liferay-npm-bundler-plugin-replace-browser-modules","optional":false}],"imports":[{"note":"This package is not imported in JavaScript; it is configured declaratively in .npmbundlerrc. The preset is loaded by liferay-npm-bundler during build.","wrong":"import preset from 'liferay-npm-bundler-preset-react'","symbol":"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."},{"note":"The preset manages all Babel configuration. Overriding may conflict with preset's plugins.","wrong":"Manually specifying babel presets in .babelrc","symbol":"Babel Presets","correct":"Babel presets are included automatically by the preset; no manual import required."},{"note":"The preset already includes this plugin; adding it again may cause duplication errors.","wrong":"Adding liferay-npm-bundler-plugin-replace-browser-modules individually to .npmbundlerrc","symbol":"Plugins","correct":"Plugins are included automatically by the preset; no manual configuration needed."}],"quickstart":{"code":"// Ensure liferay-npm-bundler is installed:\nnpm install --save-dev liferay-npm-bundler\n// Install this preset:\nnpm install --save-dev liferay-npm-bundler-preset-react\n// Create .npmbundlerrc in project root:\ncat > .npmbundlerrc <<EOF\n{\n  \"preset\": \"liferay-npm-bundler-preset-react\",\n  \n  \"config\": {\n    \"imports\": {\n      \"react\": \"^16.0.0\",\n      \"react-dom\": \"^16.0.0\"\n    }\n  }\n}\nEOF\n// Run build:\nnpm run build\n","lang":"javascript","description":"Shows installation and configuration of preset in .npmbundlerrc, including specifying React dependencies."},"warnings":[{"fix":"Update liferay-npm-bundler to a compatible version (e.g., >=2.0.0).","message":"Preset requires liferay-npm-bundler version that supports 'preset' configuration.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Consider migrating to liferay-js-toolkit for ongoing support.","message":"Use of this preset may be superseded by newer Liferay build tools (e.g., liferay-js-toolkit).","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Manually specify newer React versions in .npmbundlerrc's 'imports' section.","message":"If using React 17+ or 18+, the bundled react and react-dom versions may be outdated.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use a standard React build tool (e.g., Create React App) for non-Liferay projects.","message":"Preset assumes a Liferay environment; not intended for generic React projects.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run `npm install --save-dev liferay-npm-bundler-preset-react`.","cause":"The preset package is not installed or is not in node_modules.","error":"liferay-npm-bundler: The preset \"liferay-npm-bundler-preset-react\" cannot be found."},{"fix":"Add 'babel-preset-liferay-standard' to your devDependencies explicitly.","cause":"Dependency missing due to npm hoisting issues.","error":"Error: Cannot find module 'babel-preset-liferay-standard'"},{"fix":"Create a valid .npmbundlerrc with a 'preset' field.","cause":"Missing .npmbundlerrc file or malformed JSON.","error":"TypeError: Cannot read property 'preset' of undefined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}