Ensure dynamic imports exist at build time

[hyperknot]

How do I ensure that dynamic imports exist at runtime?

Case in point, I'm dynamically importing SQL migrations in a for loop.

When they exist, I see lines like:

dist/assets/index-Dtn62Xmo.css                        0.91 kB │ gzip:   0.49 kB
dist/assets/0000_faulty_cassandra_nova-C7aVCMXc.js    1.41 kB │ gzip:   0.44 kB
dist/assets/index-3OBMpGxX.js                        73.42 kB │ gzip:  21.08 kB

However, if they don't exist, I see lines like:

dist/assets/index-Dtn62Xmo.css              0.91 kB │ gzip:   0.49 kB
dist/assets/index-gZG5MBLF.js              72.19 kB │ gzip:  20.54 kB

Now, since this is super critical at startup, a missing file breaks the app. How can I detect this missing at build time? Vite must be able to do this, as it's checking for the file's existance, as seen from the lines. But it's failing silently, without any warning, not even with --debug mode.

What can I do to simply fail the build process, instead of silently accepting that missing file?

---

This is my dynamic import part:

for (const journalEntry of journal.entries) {
    const tag = journalEntry.tag
    try {
      const { default: sql } = await import(`../migrations/${tag}.sql?raw`)
      console.log(sql)
    } catch (error) {
      console.error(`Migration ${tag} not found:`, error)
      throw error
    }
  }

[rschristian]

await import(`../migrations/${tag}.sql?raw`)

Unfortunately this is not statically analyzable, there's no way to determine whether or not that module exists at build time as it relies on a runtime variable (tag) to form the path. Vite does what it can to find matching modules via globs, but that's somewhat limited & is guess work that can easily over-bundle.

You can build your own logic out pretty easily though with a simple plugin:

function myPlugin() {
    return {
        name: 'my-plugin',
        transform(code, id) {
            const dynamicImportRegex = /import\(`([^`]+)`\)/g;

            const matches = code.matchAll(dynamicImportRegex);
            for (const match of matches || []) {
                // Check if `match[1]` exists on disk
                // ...
            }
        }
    }
}

[hyperknot]

I see, so vite actually tries to turn ${tag} into a glob by some smart guessing? I mean, if there were thousands of files in that folder, but I only import a few of them, Vite would actually bundle all the thousand files, just in case?

Thank you for the plugin idea!

[rschristian]

if there were thousands of files in that folder, but I only import a few of them, Vite would actually bundle all the thousand files, just in case?

Potentially, yes. The issue is that you're not actually importing any of them; instead, you're listing a dependency upon all files that match the pattern ../migrations/${tag}.sql. Vite has to assume the worst and bundle them all when/if it does find matching files, or, it could choose to entirely ignore this as some other bundlers do, leaving it upon the user to make sure those files exist at runtime at that path. Both options have significant DX issues.

There's a big thread on dynamic imports w/ variables, can have a skim to pick up on some of the issues, use cases, and justification for the current system. TLDR: bundling relies on static analysis but dynamic imports can be, well, dynamic. Hard to bring them together.