Steps

When a module bundles JavaScript with imports that are not bundled (i.e., it depends on an external resource), the module import ID needs to be mapped to the URL of the module JavaScript entry point.

To do so, an xwiki.extension.javascript.modules.importmap maven property needs to be declared in the module.

The example below shows how to map the import of Vue to the entry point of the Vue webjars.

Step 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>

Step 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>

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>