[SOLVED] Workbox loading wrong dynamic import url

Workbox loading wrong dynamic import url

I am using workbox & babel dynamic imports for a laravel/vuejs application. I am also using laravel-mix and laravel-mix-workbox plugin to compile and generate service worker via generateSW().

The assets are are loaded correctly in the root url https://myapp.test/ based on conditions set in vue-router. like so: https://myapp.test/assets/js/chunk1.js. When I visit child pages like https://myapp.test/post/post1, the chunks relating to the page are loaded correctly also. So far so good!

But when I visit a post page directly (https://myapp.test/post/post1), the dynamic asset urls are appended to the latest slash, meaning https://myapp.test/post/assets/js/chunk1.js and fails to load them. As if the root url is set as the first page we visit.

I have tried adding output.path & output.publicPath in webpack config, but they did not help.

Related packages:

"devDependencies" {
   "workbox-webpack-plugin": "^6.0.2",
   "babel-plugin-syntax-dynamic-import": "^6.18.0",
   "laravel-mix": "^5.0.9",
   "laravel-mix-workbox": "^0.1.4",
}

generateSW config:

mix.generateSW({
    mode: 'development',
    runtimeCaching: [
        {
            urlPattern: /\.(?:jpg|jpeg|svg|png|json)$/,
            handler: 'CacheFirst',
        },
        {
            urlPattern: /api($|\/?.*)/,
            handler: 'NetworkFirst'
        }
    ],
    exclude: [
        /(backend.css|backend.js)/
    ],
    include: [
        /\.(?:ttf|js|css|glb)$/,
        /(\/font.png)/
    ],
    skipWaiting: true,
});

Thank you for your time.

Solution

I finally fixed it by adding a <base> tag to my html <head>. Turns out this is where workbox determines base URL.

<base href="https:://myapp.test/">

Any in my case in Laravel:

<base href="{{config('app.url')}}">