server icon indicating copy to clipboard operation
server copied to clipboard

fix(template): add import map for JS module entry points

Open susnux opened this issue 1 month ago • 0 comments

Summary

Currently apps are broken if they have exports in the JS entry point, because they then will import from the entry point but because they do not know about the Nextcloud cache buster they will import without cache buster.

This results in two problem:

  1. The module might be outdated (old cached)
  2. The module is duplicated, so the module will be loaded twice and will have two different - out of sync - states. This also means it will re-run sideeffects of the entry point.

To fix this we generate an import map which basically maps the plain entry point script to the script with cache buster added.

Why this can happen? If we want to reduce chunks the bundler can include exports from submodules into entry points and thus reduce the number of files. This is more performant on the web so this is a valid reason.


For example:

// entry.mjs
console.error('called')

async function onClick() {
  await import('./chunk.mjs')
}

export const name = 'foo'

// chunk.mjs
import { name } from './entry.mjs'

console.error(name)

When calling onClick without this fix the output will be:

called called foo

With this fix:

called foo

Checklist

susnux avatar Dec 09 '25 23:12 susnux