Define the Importmap for an Eager Module

Last modified by Eleni Cojocariu on 2026/05/12 10:01

Content

Steps

It is possible to define a module as part of the importmap, but to also make it eager, meaning that the module is going to be loaded an executed directly on page load.

Step 1

Add the dependency you wish to load eagerly

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <dependencies>
    <!-- ... -->
    <dependency>
      <groupId>my.group.id</groupId>
      <artifactId>my-webjar</artifactId>
      <scope>runtime</scope>
    </dependency>
    <!-- ... -->
  </dependencies>
</project>

Step 2

Declare theĀ xwiki.extension.javascript.modules.importmap property. See the ! at the start of the value.

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
   <properties>
     <xwiki.extension.javascript.modules.importmap>
     {
       "module-id": "!my.group.id:my-webjar/index.prod.js"
     }
     </xwiki.extension.javascript.modules.importmap>
  </properties>
</project>

Final result

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <parent>
    <groupId>org.xwiki.platform</groupId>
    <artifactId>xwiki-platform-livedata</artifactId>
    <version>18.1.0-SNAPSHOT</version>
  </parent>
  <packaging>webjar-node</packaging>
  <artifactId>xwiki-platform-livedata-webjar</artifactId>
  <properties>
      <xwiki.extension.javascript.modules.importmap>
     {
       "module-id": "!my.group.id:my-webjar/index.prod.js"
     }
  </properties>
  <dependencies>
    <dependency>
      <groupId>my.group.id</groupId>
      <artifactId>module-id</artifactId>
      <scope>runtime</scope>
    </dependency>
  </dependencies>
</project>

Get Connected