server
server copied to clipboard
fix(template): add import map for JS module entry points
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:
- The module might be outdated (old cached)
- 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
- Code is properly formatted
- Sign-off message is added to all commits
- [ ] Tests (unit, integration, api and/or acceptance) are included
- [ ] Screenshots before/after for front-end changes
- [ ] Documentation (manuals or wiki) has been updated or is not required
- [ ] Backports requested where applicable (ex: critical bugfixes)
- [x] Labels added where applicable (ex: bug/enhancement,
3. to review, feature component) - [x] Milestone added for target branch/version (ex: 32.x for
stable32)