How to set up config for dynamic imports when entry file and chunks are loaded from a CDN?

[jongeyer]

Hey there, I'm looking for help to resolve some code-splitting issues in a unique deployment setup.

Background and setup

• I have a Vue app that dynamically loads and renders blocks of content (like from a CMS) on a page. So for example, if the page includes a carousel block and text block, there’s a <component :is=“…” /> for each block type.
• There are several block types and I don’t want to put them in a single bundle so I have some code splitting on block SFCs. So I have something like this in my entry file to async import those globally…

blockTypes.forEach((blockType) => {
  app.component(
    blockType,
    defineAsyncComponent(() => import(`./blocks/${blockType}.vue`))
  )
})

• I’m using vue@3.5., vite@5.4.4, @vitejs/plugin-vue@5.1.3

So far, this is all fairly straightforward when I have complete control over the deployment.

Enter Shopify development

But this is where it gets tricky.

The Vue application is deployed as a Shopify theme extension block for a Shopify app. The main thing that’s relevant here is that Shopify handles the deployment and sets some annoying constraints.

1. All assets must be in a flat /assets/ folder (I have this part working with rollupOptions in the vite config)

rollupOptions: {
    input: './src/main.ts',
    output: {
      entryFileNames: 'assets/genesis-block.js',
      chunkFileNames: 'assets/[name]-[hash].js',
      assetFileNames: 'assets/block.[ext]'
  }
}

3. The domain for the HTML is [some-store].myshopify.com; but the assets are put on a CDN cdn.shopify.com/extensions/[theme_extension_uuid]/assets/* (and the theme_extension_uuid is not known at build time).

4. Also, the asset URL includes a cache buster param when injected in the html, like this…
   cdn.shopify.com/extensions/[theme_extension_uuid]/assets/index.js?v=1726188069

Now when loading the page... things get weird:

• script tag loads the entry file (with cache buster) — this loads, of course
• then the entry file tries to load a chunk, but from the HTML domain (not the CDN), this 404s
• but somehow the entry file keeps going and loads the same chunk, but now from the CDN domain — this works 🤷
• now the chunk itself references the entry file, but without the cache buster param — so this works, but requests the entry file again
• and it looks like there are pairs of 404 + 200 responses for each chunk

Worse, for CSS chunks

• the first chunk loads correctly (because it's specified in the HTML)
• but for the dynamically loaded CSS, these are ONLY requested from the HTML domain — so only 404s for these

I get a mess of console errors for each 404, and a lot of red in the network tab.

How to configure for this case?

Is this a vite or vite plugin vue concern, or something I should solve for with rollup options? I’m not sure how to move forward.

[jongeyer]

Updated above with a note that...

• JS chunks are requested for both domains.
• but CSS chunks are only requested for the window location domain -- so only 404s

[sapphi-red]

then the entry file tries to load a chunk, but from the HTML domain (not the CDN), this 404s

This should not happen. Are you using the latest version? If so, would you create a minimal reproduction?

now the chunk itself references the entry file, but without the cache buster param

Assuming you are outputting the bundle as ESM, adding a query param won't work well with ESM. Is it possible to disable that behavior? If it is not possbile, I guess you need to workaround it by serving a proxy module that contains import './path/to/real/file/with/hash.js'.

[sapphi-red]

What is shown if you click on the gen-block.js?v=* in the initiator of the chunks imported from the entry file (window domain)?

I've started to put together a minimal reproduction, but it's tricky in this case because the behavior only occurs when the chunks are deployed on a separate domain from the app.

If it's possible, maybe it is easier to send me the link of the actual site. If you prefer not to send it publicly, you can send me through a discord DM. I'm in the Vite server (https://chat.vitejs.dev/).

[jongeyer]

So here's what it looks like using the proxy module (gen-loader.js), and turning off minification:

For the TextBlock chunk from window domain (404), if I click into the initiator it takes me to where the entry file appends the script to the document:

For the TextBlock chunk from CDN domain (200), if I click into the initiator it takes me to where the entry file has the defineAsyncComponent for all dynamic imports (including TextBlock):

[sapphi-red]

From what I can see, the preload is getting 404. This dep variable has a wrong URL.

vite/packages/vite/src/node/plugins/importAnalysisBuild.ts

Line 100 in 54c55db

dep = assetsURL(dep, importerUrl)

If you are using experimental.renderBuiltUrl, probably your setting is wrong. If not, I need a reproduction to find the cause. It doesn't need to reproduce but a explanation how the code is deployed (e.g. which file is deployed to which URL).

[jongeyer]

Aha! So I was not using renderBuildUrl. But then as I was reading the docs on that more carefully I realized that's exactly what I needed. It took some trial and error with the code outlined here, but looks like I got it working for both JS and CSS chunks.

// vite.config
experimental: {
    renderBuiltUrl(filename, { hostType }) {
      if (hostType === 'js') {
        return {
          runtime: `window.__toCdnUrl(${JSON.stringify(filename)})`
        }
      } else {
        return { relative: true }
      }
    }
  },

then in my proxy module (to get the CDN URL at runtime)

const loaderPathFile = 'assets/gen-lp-loader.js'
const loaderSrc = document.querySelector('#MainContent script').src
const [shopifyCdnUrl] = loaderSrc.split(loaderPathFile)
window.__toCdnUrl = (filename) => {
  return `${shopifyCdnUrl}${filename}`
}

Thanks for pointing me in the direction @sapphi-red 🙇🏼