When should I use the JS Import Map Entry client extension type?

• You want to share a library between multiple Custom Element extensions without bundling it into each. • You need vendored libraries (react, jquery, chart.js) available by bare name. • You're building a mini-framework that other CX packages import.

How do I create a JS Import Map Entry client extension?

1. Ship your module (usually an ES module) at a stable URL. 2. Give it a `bareSpecifier` — the name other code will `import` by. 3. Consuming extensions then use `import x from "bareSpecifier"`.

What fields are required on a JS Import Map Entry client extension?

bareSpecifier (string): Module specifier — the name used in `import` statements. url (string): Path to the JS module.

JS Import Map Entry

type: jsImportMapsEntry·Frontend·Liferay docs →

# description

Adds an entry to Liferay's page-level JavaScript importmap. Other extensions can then `import x from 'my-package'` and the browser resolves it to your URL.

UI extensions that render on Liferay pages or modify page appearance.

# when to use

→You want to share a library between multiple Custom Element extensions without bundling it into each.
→You need vendored libraries (react, jquery, chart.js) available by bare name.
→You're building a mini-framework that other CX packages import.

# how to use

01Ship your module (usually an ES module) at a stable URL.
02Give it a bareSpecifier — the name other code will import by.
03Consuming extensions then use import x from "bareSpecifier".

# required fields

field	type	description
`bareSpecifier`required	`string`	Module specifier — the name used in `import` statements.
`url`required	`string`	Path to the JS module.

# optional fields

field	type	description
`name`	`string`	Display name.
`useESM`	`boolean`	Load as an ES module.
`oAuthApplicationHeadlessServer`	`string`	Optional ref code of a paired headless-server OAuth app when the module is behind auth.

# example

client-extension.yaml

chart-lib:
    type: jsImportMapsEntry
    bareSpecifier: chart-lib
    url: https://cdn.example.com/chart-lib/dist/index.js
    useESM: true

# more in frontend

cd ..scaffold this type in VS Code →