{"id":13457,"library":"liferay-npm-bundler-preset-vue-cli","title":"Liferay NPM Bundler Preset for Vue CLI","description":"The `liferay-npm-bundler-preset-vue-cli` package, currently at version 2.32.2, provides a configuration preset for the `liferay-npm-bundler`. Its primary purpose is to enable projects created with Vue CLI to be correctly bundled and deployed within Liferay DXP or Liferay Portal CE environments. This preset automates the necessary build configurations, adapting Vue CLI's output to Liferay's module loading and deployment mechanisms. While this package received updates in conjunction with the broader Liferay frontend projects, the underlying `liferay-npm-bundler` has been officially deprecated as of Liferay 2024.Q4/Portal GA129 and is slated for future removal. This signifies a shift in Liferay's frontend development strategy towards more standard JavaScript tooling like `esbuild`, `webpack`, or `vite`. Consequently, this preset is no longer actively supported for new development and existing projects should plan for migration away from the `liferay-npm-bundler` 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-preset-vue-cli","lang":"bash","label":"npm"},{"cmd":"yarn add liferay-npm-bundler-preset-vue-cli","lang":"bash","label":"yarn"},{"cmd":"pnpm add liferay-npm-bundler-preset-vue-cli","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This package is a configuration preset *for* liferay-npm-bundler, making it a mandatory runtime dependency for its functionality.","package":"liferay-npm-bundler","optional":false},{"reason":"The preset is specifically designed for projects scaffolded and built using Vue CLI, implying its functional dependency on a Vue CLI project structure.","package":"@vue/cli-service","optional":false}],"imports":[{"note":"This package is a configuration preset, not a JavaScript module to be imported directly. It is referenced as a string value within the `.npmbundlerrc` JSON configuration file.","wrong":"import LiferayVuePreset from 'liferay-npm-bundler-preset-vue-cli'","symbol":"preset","correct":"{ \"preset\": \"liferay-npm-bundler-preset-vue-cli\" }"}],"quickstart":{"code":"npm install --save-dev liferay-npm-bundler-preset-vue-cli\n\n# Create or update your .npmbundlerrc file in the project root\necho '{ \"preset\": \"liferay-npm-bundler-preset-vue-cli\" }' > .npmbundlerrc\n\n# Example of a minimal Vue CLI project structure (not created by this preset)\n# This demonstrates the context in which the preset is used.\n# Make sure your Vue CLI project is set up as usual before applying the bundler preset.\n# For a new Vue project, typically you'd run:\n# vue create my-vue-portlet\n# cd my-vue-portlet\n\n# Then, after installing the preset and configuring .npmbundlerrc, you would build your project\n# The actual build command depends on your package.json scripts, e.g., 'npm run build'\n# and the liferay-npm-bundler would then process the output.\n\n# Note: liferay-npm-bundler is deprecated. Consider migrating to standard tooling.","lang":"javascript","description":"Demonstrates how to install the preset and configure the `.npmbundlerrc` file to enable the preset for a Vue CLI project intended for Liferay DXP/Portal."},"warnings":[{"fix":"Projects should plan to migrate away from the `liferay-npm-bundler` ecosystem to standard JavaScript tooling like `esbuild`, `webpack`, or `vite`. Consult Liferay's official documentation for migration guides.","message":"The `liferay-npm-bundler` itself, which this preset relies upon, has been officially deprecated as of Liferay 2024.Q4/Portal GA129 and is planned for future removal. This means the `liferay-npm-bundler-preset-vue-cli` is also deprecated and will eventually cease to function with newer Liferay versions or be removed entirely.","severity":"breaking","affected_versions":">=2.0.0 (and Liferay DXP versions 2024.Q4/GA129 and later)"},{"fix":"Workarounds involved transpiling modules to CommonJS before the bundler runs, or using Babel's `babel-loader` plugin within the bundler config. However, the recommended fix is to migrate to a standard bundler.","message":"The `liferay-npm-bundler` (and thus projects using this preset) historically had issues with modern ES module syntax (`import`/`export`) in third-party dependencies, expecting CommonJS/ES5 format. This can lead to runtime errors like 'Cannot use import statement outside a module'.","severity":"gotcha","affected_versions":"<3.0.0 (of liferay-npm-bundler)"},{"fix":"Be aware of this internal package resolution mechanism. There's no direct 'fix' other than understanding the bundler's internal workings or, ideally, migrating to a standard bundler.","message":"The `liferay-npm-bundler` stores packages in a non-standard `bundle-name$package@version` format rather than the typical `node_modules` tree. This can cause unexpected issues with tools or configurations that expect a standard `node_modules` structure.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Ensure `liferay-npm-bundler` is at version `2.32.1` or later to avoid the known `globby` issue. For future stability, migrating to a standard bundler is recommended.","message":"Updates to transitive dependencies of `liferay-npm-bundler` have historically caused unexpected build breaks. While a specific `globby` issue was resolved in `liferay-npm-bundler` version 2.32.1, the underlying fragility remains a concern due to the custom nature of the bundler.","severity":"gotcha","affected_versions":"<=2.32.0 (of liferay-npm-bundler)"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"This issue is a known limitation of `liferay-npm-bundler` v2. Consider configuring Babel to transpile `node_modules` dependencies to CommonJS before the bundler runs, or, more robustly, migrate your project to a standard bundler like Webpack or esbuild.","cause":"The `liferay-npm-bundler` version 2 expects CommonJS/ES5 format for third-party modules and struggles with modern ES module syntax (import/export).","error":"Uncaught SyntaxError: Cannot use import statement outside a module"},{"fix":"Pin the `liferay-npm-bundler` dependency to a specific working version in your `package.json` (e.g., `\"liferay-npm-bundler\": \"2.32.2\"`). If already using a pinned version, try clearing `node_modules` and `package-lock.json` and reinstalling. If the issue persists, refer to Liferay's official support channels for specific breaking changes or migrate to standard tooling.","cause":"Unexpected updates to `liferay-npm-bundler` or its transitive dependencies have previously caused build instability and failures.","error":"Build fails with cryptic errors or 'command not found' related to liferay-npm-bundler after npm update"},{"fix":"Verify that your Vue CLI project, Node.js version, and Liferay DXP/Portal version are compatible with the `liferay-npm-bundler` and this preset. Review the `.npmbundlerrc` configuration to ensure it's correctly applied. Check Liferay's official documentation and community forums for known compatibility issues or migration advice, especially given the bundler's deprecation.","cause":"Incompatibility between the `liferay-npm-bundler` preset configuration and specific versions of Vue CLI, Node.js, or Liferay DXP/Portal, or incorrect `.npmbundlerrc` setup.","error":"My Vue CLI project does not deploy or run correctly in Liferay DXP/Portal."}],"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}