Define the Importmap for a Module

Last modified by Eleni Cojocariu on 2026/09/25 02:48

Content

Steps

Map a module's bare import ID to the URL of its JavaScript entry point with the xwiki.extension.javascript.modules.importmap Maven property, needed when the module depends on JavaScript it does not bundle, as the example below does for Vue.

  1. Add the dependency you wish to map to the runtime dependencies of the module.
    <?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>org.webjars.npm</groupId>
          <artifactId>vue</artifactId>
          <scope>runtime</scope>
        </dependency>
        <!-- ... -->
      </dependencies>
    </project>
  2. Declare theĀ xwiki.extension.javascript.modules.importmap property.
    <?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>
         {
           "vue": "org.webjars.npm:vue/dist/vue.runtime.esm-browser.prod.js"
         }
         </xwiki.extension.javascript.modules.importmap>
      </properties>
    </project>
  3. Check the 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>
         {
           "vue": "org.webjars.npm:vue/dist/vue.runtime.esm-browser.prod.js"
         }
         </xwiki.extension.javascript.modules.importmap>
      </properties>
      <dependencies>
        <dependency>
          <groupId>org.webjars.npm</groupId>
          <artifactId>vue</artifactId>
          <scope>runtime</scope>
        </dependency>
      </dependencies>
    </project>

Get Connected