Can't dynamically import a node module with a variable

[looskie]

Describe the bug

Hi! I've ran into an issue where I can't import a dependency from node modules with a variable. But without a variable, it works. I also tried using a variable for a "local" import and that also works.

I've attached a minimal reproduction, that uses dayjs as an example.

Reproduction

original: https://stackblitz.com/edit/vitejs-vite-rb9v1k?file=src%2FApp.tsx

vite 5.4.2 (same issue): https://stackblitz.com/edit/vitejs-vite-cc4fvd?file=src%2FApp.tsx

(check console)

Steps to reproduce

No response

System Info

System:
    OS: macOS 13.3
    CPU: (8) arm64 Apple M1
    Memory: 119.72 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.3.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.8.0 - /usr/local/bin/npm
    pnpm: 8.2.0 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 115.0.5790.170
    Firefox Nightly: 114.0a1
    Safari: 16.4

Used Package Manager

yarn

Logs

TypeError: Failed to resolve module specifier 'dayjs/locale/en'

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[bolt-new-by-stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-rb9v1k (Open reproduction)
• vitejs-vite-cc4fvd (Open reproduction)

[hai-x]

It will get some warnings.

The above dynamic import cannot be analyzed by Vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

Try @rollup/plugin-dynamic-import-vars plugin and modify the vite.config.ts

import dynamicImportVars from '';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    dynamicImportVars({
      // options
    }),
    react(),
  ],
});

But the plugin has some limitations on importing path. See more: https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations

[looskie]

@haijie-x

Hi! Thanks for the quick reply. The limitations of this plugin specifically says that node_module imports wont work, which adds more problems than I originally started with.

[webJose]

According to the page listed in the warning, you are not complying with Vite's limitations as far as I can see:

• days/locale/en doesn't start with ./ or ../.
• ./meow/${test} doesn't have a file extension and doesn't have a file pattern.

[looskie]

According to the page listed in the warning, you are not complying with Vite's limitations as far as I can see:

• days/locale/en doesn't start with ./ or ../.
• ./meow/${test} doesn't have a file extension and doesn't have a file pattern.

I am aware. Both of the cases that you provided from the reproduction still worked though, and is a smaller part of the issue at hand.

[bluwy]

Making this work will be tricky but not impossible. When you do import(`dayjs/locale/${'en'}`), what happens is that Vite needs to glob dayjs/locale/* to identify the possible values of * and bundle it all up. We're able to support the glob syntax today with optimizeDeps.include, and this translates to supporting the glob syntax in import.meta.glob too as the dynamic import will be transpiled as an import.meta.glob.

[goldyfruit]

I'm using vite-plugin-federation to load remote components. I'm having (I think) the same issue (not very familiar with Vite/VueJS).

Basically this works:

defineAsyncComponent(() => import('ovosSkillPersonalOpenvoiceos/MainComponent'));

But this doesn't:

const componentName = 'ovosSkillPersonalOpenvoiceos/MainComponent';
defineAsyncComponent(() => import(componentName));

I tried this as well but without success:

const componentName = 'SkillPersonalOpenvoiceos/MainComponent';
defineAsyncComponent(() => import('ovos' + componentName));

Not sure if there is a solution/workaround.

Thanks 👍

[bluwy]

You need strings inside import() to be static like the first example. Most bundlers require that so it's statically analyzable for bundling. I think it's not quite related to this issue.

[goldyfruit]

You need strings inside import() to be static like the first example. Most bundlers require that so it's statically analyzable for bundling. I think it's not quite related to this issue.

Thanks