Dynamic Imports work on dev server but not in build?

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>

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

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

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

Any ideas?

TyphonJS•2y ago•

21 replies

geoidesic [Aardvark Games]

Dynamic Imports work on dev server but not in build?

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>

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

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

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

Any ideas?

Dynamic Imports work on dev server but not in build?

Similar Threads

Dynamic Imports work on dev server but not in build?

Similar Threads

Similar Threads

Similar Threads