Dynamic imported files not in built files

[karlhorky]

Describe the bug

Files which are imported using Vite's dynamic import feature relying on an interpolated value (eg. from the define option) are not found after build:

main.ts

await import(`./x/${__NAME__}.ts`);

vite.config.ts

import { defineConfig } from 'vite';

export default defineConfig(({ mode }) => {
  return {
    build: { target: 'esnext' },
    define: {
      __NAME__: JSON.stringify('dynamic'),
    },
  };
});

Error message:

Uncaught TypeError: Failed to fetch dynamically imported module: http://localhost:8000/assets/x/dynamic.ts

The dynamically imported files are resolved in development mode.

Reproduction

https://github.com/karlhorky/vite-dynamic-import-build-missing-files

Steps to reproduce

1. Use create-vite
2. Add a define value
3. Use the define value in a dynamic import in main.ts
4. Run vite build
5. Observe the error in the browser DevTools 💥

Alternative: clone repo above

System Info

System:
    OS: macOS 14.3.1
    CPU: (8) arm64 Apple M1
    Memory: 51.41 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.2.4 - /opt/homebrew/bin/npm
    pnpm: 8.15.1 - /opt/homebrew/bin/pnpm
  Browsers:
    Brave Browser: 111.1.49.120
    Chrome: 121.0.6167.160
    Chrome Canary: 123.0.6292.0
    Edge: 111.0.1661.44
    Safari: 17.3.1
  npmPackages:
    vite: ^5.1.0 => 5.1.1

Used Package Manager

pnpm

Logs

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] 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.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[karlhorky]

Oh, after some searching I just found the following issue:

• https://github.com/vitejs/vite/issues/14102

@bluwy is this related?

I will also post some details over there

[XiSenao]

You can use it as follows.

const fileName = __NAME__;
await import(`./x/${fileName}.ts`);

This may be related to the implementation of the @rollup/plugin-dynamic-import-vars plugin. ref: https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations