Dynamically import one single module

[putnikproj]

Description

I am using Astro and storyblok to build a blog application, so the following runs on Node.js. For this purpose I have several files (js modules) that should be loaded when they are used on a specific page, and should not be loaded when they are not used. I am trying to use this snippet:

const dynamicModuleName = 'TextSection';
const module = await import(`../components/${dynamicModuleName}.astro`;

But in my final bundle I see all the modules that exist in /src/components. This is probably due to @rollup/plugin-dynamic-import-vars, which behavies like this:

`./locales/${locale}.js` -> './locales/*.js'

But my question is: Is it possible to import only one specific file into my final bundle in such a way?

`./locales/${locale}.js` -> './locales/locale.js'

Suggested solution

Maybe there is an existing solution I don't know about?

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[chaxus]

It looks like this plugin will solve your problem

[putnikproj]

This plugin doesn't solve my problem, because it behaves like @rollup/plugin-dynamic-import-vars, only with some improvements, but it still doesn't load a specific module, but the whole folder.

[bluwy]

That's because dynamicModuleName could be anything, so the bundler needs to take in account of all potential names to import when bundling. If you know only a subset of files that may be imported, you can do:

let module
if (dynamicModuleName === 'foo') {
  module = await import(`../components/foo.astro`)
} else if (...) {
  // ...
}

Otherwise there's no way around it as it could break runtime.

[putnikproj]

I'll clarify the situation. I get data from cms with information about blocks used on the page. Next, I need to import only the modules which are used on the page like this:

{
    {/* some jsx */}
    story.content.body.map(async (blok) => {
      let component;
      if (capitalizeFirstLetter(blok.component) === 'Advantage') {
        component = await import('../../components/storyblok/Advantage.astro');
      } else if (capitalizeFirstLetter(blok.component) === 'AdvantageList') {
        component = await import('../../components/storyblok/AdvantageList.astro');
      }
      /* etc. */
      return <component.default blok={blok} />;
    })
}

But Vite resolves all the imports statically, ignoring if/else. As you can see, I can dynamically import multiple components on a page, but the ones I don't import, should not be in my bundle. I suppose there is an option to make this possible, but I haven't managed to find it. @bluwy, thank you in advance.

[bluwy]

There isn't an option since that's how bundlers work. I'm curious how this causes a problem for you though. Since Astro generate static pages by default, all the dynamic imports would be discarded later? Unless you're using SSR, then this behaviour is expected since during rendering the capitalizeFirstLetter(blok.component) could be anything and the SSR bundled output needs to anticipate all possible cases.

If you know that page doesn't use a component, you still can't omit the dynamic import output since the bundler doesn't know. The only way is through define, or if you really want to, you can write a Vite plugin that implements define per-page (because you know what page would use what components), but that's going into complex territory.

[putnikproj]

Unfortunately, all the imports are bundled, whether they are used in a page or not (whether in SSG or SSR mode). For example, even if I create a page with the following single command in the frontmatter:

---
import.meta.glob('../../components/storyblok/*.astro')
---
<div></div>

All the javascript code in the Astro modules will be bundled and I wonder why, since it is supposed to be just an object with keys and values, there are even no import declarations. There is also no difference between eager: true and eager: false. So, all my pages will contain all the modules that exist in the storyblok/ folder anyway. All I can do is to explicitly tell which modules to load on each page, automatic tree-shaking doesn't work. And that's sad, because I want to use cms and I can't explicitly set the modules I need. That's why if I want to use cms, I have to have all the modules from all the pages on each separate page, there is no other way.

[putnikproj]

@bluwy, I've created a representation of my problem and why tree-shaking is not working properly for now. Please examine this example carefully. https://stackblitz.com/edit/github-b1xdf7. Run the npm run build command and you will see that all the modules are bundled

[sapphi-red]

It seems this is happening because astro pre-evaluates dynamic imports.
https://stackblitz.com/edit/github-b1xdf7-rajkhn?file=src%2Fpages%2Findex.astro
I don't know whether this is intended in astro.

[erikalbinssonCompary]

@putnikproj Did you ever find a solution? Experiencing the same issue