Registry / web-framework / liferay-npm-bundler-preset-vue-cli

liferay-npm-bundler-preset-vue-cli

library2.32.2jsnpmunverified

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.

web-framework devops

npm install liferay-npm-bundler-preset-vue-cli

github ↗package ↗

INSTALL

IMPORT

SIG · LIFERAY-NPM-BUNDLE

liferay-npm-bundler-preset-vue-cli

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.

preset

✓ { "preset": "liferay-npm-bundler-preset-vue-cli" }

✗ import LiferayVuePreset from 'liferay-npm-bundler-preset-vue-cli'

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.

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.

npm install --save-dev liferay-npm-bundler-preset-vue-cli # Create or update your .npmbundlerrc file in the project root echo '{ "preset": "liferay-npm-bundler-preset-vue-cli" }' > .npmbundlerrc # Example of a minimal Vue CLI project structure (not created by this preset) # This demonstrates the context in which the preset is used. # Make sure your Vue CLI project is set up as usual before applying the bundler preset. # For a new Vue project, typically you'd run: # vue create my-vue-portlet # cd my-vue-portlet # Then, after installing the preset and configuring .npmbundlerrc, you would build your project # The actual build command depends on your package.json scripts, e.g., 'npm run build' # and the liferay-npm-bundler would then process the output. # Note: liferay-npm-bundler is deprecated. Consider migrating to standard tooling.

Debug

Known issues

breakingThe `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.

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.

affects: >=2.0.0 (and Liferay DXP versions 2024.Q4/GA129 and later)

gotchaThe `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'.

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.

affects: <3.0.0 (of liferay-npm-bundler)

gotchaThe `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.

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.

affects: >=2.0.0

gotchaUpdates 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.

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.

affects: <=2.32.0 (of liferay-npm-bundler)

Errors

Common errors & fixes

Uncaught SyntaxError: Cannot use import statement outside a module

The `liferay-npm-bundler` version 2 expects CommonJS/ES5 format for third-party modules and struggles with modern ES module syntax (import/export).

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.

Build fails with cryptic errors or 'command not found' related to liferay-npm-bundler after npm update

Unexpected updates to `liferay-npm-bundler` or its transitive dependencies have previously caused build instability and failures.

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.

My Vue CLI project does not deploy or run correctly in Liferay DXP/Portal.

Incompatibility between the `liferay-npm-bundler` preset configuration and specific versions of Vue CLI, Node.js, or Liferay DXP/Portal, or incorrect `.npmbundlerrc` setup.

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.

Upgrade

Version history

2.32.2latest on npm

Audit

Dependencies

liferay-npm-bundlerrequiredThis package is a configuration preset *for* liferay-npm-bundler, making it a mandatory runtime dependency for its functionality.

@vue/cli-servicerequiredThe preset is specifically designed for projects scaffolded and built using Vue CLI, implying its functional dependency on a Vue CLI project structure.

Agent activity

2 hits · last 30 days

node

Resources

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

packagehttps://www.npmjs.com/package/liferay-npm-bundler-preset-vue-cli ↗