[build-rollup] app-shell import wrongly uses relative path

When building a SPA with an app-shell using the default (modern) rollup config, the app shell import in index.html is rewritten to be dynamically imported by relative path. E.g.:

Original index.html:

<script type="module" src="/src/my-app.js">

Becomes:

window.importShim("./my-app.js")

When it should be:

window.importShim("/my-app.js")

This is breaking refresh on a non-home page. For example, if I navigate to /users in my app and then refresh, my server responds with index.html and the dynamic import looks for /users/my-app.js, which is wrong.

The preload link is also relative.

[rwestlund]

@LarsDenBakker This may not work after all. I’ve discovered that Safari ignores <base href="/"> when using dynamic imports (tested on current Safari, both MacOS and iOS). This breaks refresh on a non-home page, as described above.

My current workaround is to stick this in the end of my build script:

sed -i '' -e 's@\./@/@g' dist/index.html

Which changes:

window.importShim("./my-app.js")

to:

window.importShim("/my-app.js")

Because Safari doesn’t respect the base URL in import(), this is the only cross-browser way I’m aware of to handle refresh in a PWA when the app shell is dynamically imported.

[LarsDenBakker]

It’s really unfortunate to hear that safari doesn’t respect the base href. I never experienced this myself, will check into it. But it sounds like something that needs to be resolved at the level of rollup then.