Build causes import errors

[geoidesic]

I'm having something weird. I'm doing dynamic async imports for certain dynamic components. It's working just find when run via a dev server (e.g. npm run dev) but once I build it, then the imports break.

From the error message it seems that the import is done via URL, rather than via code. The URL exists and is browsable in the dev server, but not once built.

Am I doing it wrong? Or are dynamic imports not available to the build?

E.g.

const importComponent = async (importPath, componentName) => {
const { default: Component } = await import(
    /* @vite-ignore */ `../${importPath}${componentName}.svelte`
  );
  return Component;
};

let importPath;

  <div class="tab-content">
    {#each tabs as tab}
      {#if tab.id === activeTab}
        {#if typeof tab.component === 'object'}
        <svelte:component this={tab.component} />
        {/if}
        {#if typeof tab.component === 'string' && importPath}
          {#await importComponent(importPath, tab.component)}
            <i class="spinner fas fa-circle-notch fa-spin"></i>
          {:then Component}
            <svelte:component this={Component} />
          {:catch error}
            <p>Error loading component: {error.message}</p>
          {/await}
        {/if}
      {/if}
    {/each}
  </div>
</div>

So this works if I run the dev server. It seems to find it via URL:

http://localhost:30001/modules/foundryvtt-my-module/components/organisms/dnd5e/Tabs/Abilities.svelte

However, once built, the path it looks for changes, leaving out the module id and reporting a 404:

http://localhost:3000/modules/components/organisms/dnd5e/Tabs/Abilities.svelte

Even if I correct the ommssion in the URL manually I still see a 404

[geoidesic]

This was working until this commit: https://github.com/geoidesic/foundryvtt-actor-studio/commit/a921ed66b33b0c46e5063fb631b8162fe4f3c46e

[geoidesic]

The first two commits in #41 were wrongly labelled. They belong here.

[geoidesic]

While this approach works, it also has the side effect of creating a large number of files in the build, which is not idea, considering that the build writes to the root of the project.

Option 1

Try #39. This would put these additional files out of the way and make it less confusing.

Option 2

Instead of dynamic imports at the time when they are required, consider using a different way of importing. The reason for the dynamic imports was to potentially make this module system agnostic. However, it's not clear that it's viable. There are likely to be many pitfalls in making it work for another system. E.g. Advancments are a 5e thing, specifically and the workflow currently relies on that.

• We could just lose the idea of supporting other systems and make these all static imports.
• We could try dynamically importing them in the index.js ready hook all at once, based on config, and then store that map of imports to a svelte store. But I'm not sure this will prevent the additional files from being created by the build.

[geoidesic]

The changes to the GitHub workflow have fixed this