Issues with dynamic import of static JS file

[andokai]

Describe the bug

Hi, I know this is probably an edge case but dynamic imports appear to be broken for me in v4.5.3.

I currently use a dynamic import to bring in configuration values based on the MODE value. The files are in the public folder and not bundled so that they can be modified post deployment.

Anyways, this used to work fine up to 4.5.2 but in 4.5.3 the import shows as an empty object.

Reproduction

https://github.com/andokai/dynamic-import-bug

Steps to reproduce

After the usual nom install then nom run dev, open the web app and you will see "This came from config.js" on the screen.

Downgrade to an earlier version of Vote and you will see "This came from development.js".

System Info

System:
    OS: macOS 14.6.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 127.77 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.8.0 - ~/.local/state/fnm_multishells/43368_1725779525036/bin/node
    npm: 10.8.2 - ~/.local/state/fnm_multishells/43368_1725779525036/bin/npm
    Watchman: 2024.08.26.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 128.0.6613.120
    Safari: 17.6
    Safari Technology Preview: 18.0
  npmPackages:
    @vitejs/plugin-react: ^4.3.1 => 4.3.1 
    vite: ^5.4.3 => 5.4.3

Used Package Manager

npm

Logs

Click to expand!

vite:config bundled config file loaded in 12.78ms +0ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'vite:optimized-deps',
  vite:config     'vite:watch-package-data',
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite:react-babel',
  vite:config     'vite:react-refresh',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm-helper',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:wasm-fallback',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:worker-import-meta-url',
  vite:config     'vite:asset-import-meta-url',
  vite:config     'vite:dynamic-import-vars',
  vite:config     'vite:import-glob',
  vite:config     'vite:client-inject',
  vite:config     'vite:css-analysis',
  vite:config     'vite:import-analysis'
  vite:config   ],
  vite:config   optimizeDeps: {
  vite:config     holdUntilCrawlEnd: true,
  vite:config     force: undefined,
  vite:config     esbuildOptions: { preserveSymlinks: false, jsx: 'automatic' },
  vite:config     include: [ 'react', 'react/jsx-dev-runtime', 'react/jsx-runtime' ]
  vite:config   },
  vite:config   server: {
  vite:config     preTransformRequests: true,
  vite:config     host: undefined,
  vite:config     sourcemapIgnoreList: [Function: isInNodeModules$1],
  vite:config     middlewareMode: false,
  vite:config     fs: {
  vite:config       strict: true,
  vite:config       allow: [Array],
  vite:config       deny: [Array],
  vite:config       cachedChecks: undefined
  vite:config     }
  vite:config   },
  vite:config   esbuild: { jsxDev: true, jsx: 'automatic', jsxImportSource: undefined },
  vite:config   build: {
  vite:config     target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
  vite:config     cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: { onwarn: [Function: onwarn] },
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     copyPublicDir: true,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     ssrEmitAssets: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
  vite:config     modulePreload: { polyfill: true },
  vite:config     cssMinify: true
  vite:config   },
  vite:config   resolve: {
  vite:config     mainFields: [ 'browser', 'module', 'jsnext:main', 'jsnext' ],
  vite:config     conditions: [],
  vite:config     extensions: [
  vite:config       '.mjs',  '.js',
  vite:config       '.mts',  '.ts',
  vite:config       '.jsx',  '.tsx',
  vite:config       '.json'
  vite:config     ],
  vite:config     dedupe: [ 'react', 'react-dom' ],
  vite:config     preserveSymlinks: false,
  vite:config     alias: [ [Object], [Object] ]
  vite:config   },
  vite:config   configFile: '/Users/andrew/Code/temp/dynamic-import-bug/vite.config.js',
  vite:config   configFileDependencies: [ '/Users/andrew/Code/temp/dynamic-import-bug/vite.config.js' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     optimizeDeps: { force: undefined },
  vite:config     server: { host: undefined }
  vite:config   },
  vite:config   root: '/Users/andrew/Code/temp/dynamic-import-bug',
  vite:config   base: '/',
  vite:config   decodedBase: '/',
  vite:config   rawBase: '/',
  vite:config   publicDir: '/Users/andrew/Code/temp/dynamic-import-bug/public',
  vite:config   cacheDir: '/Users/andrew/Code/temp/dynamic-import-bug/node_modules/.vite',
  vite:config   command: 'serve',
  vite:config   mode: 'development',
  vite:config   ssr: {
  vite:config     target: 'node',
  vite:config     optimizeDeps: { noDiscovery: true, esbuildOptions: [Object] }
  vite:config   },
  vite:config   isWorker: false,
  vite:config   mainConfig: null,
  vite:config   bundleChain: [],
  vite:config   isProduction: false,
  vite:config   css: { lightningcss: undefined },
  vite:config   preview: {
  vite:config     port: undefined,
  vite:config     strictPort: undefined,
  vite:config     host: undefined,
  vite:config     https: undefined,
  vite:config     open: undefined,
  vite:config     proxy: undefined,
  vite:config     cors: undefined,
  vite:config     headers: undefined
  vite:config   },
  vite:config   envDir: '/Users/andrew/Code/temp/dynamic-import-bug',
  vite:config   env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   packageCache: Map(1) {
  vite:config     'fnpd_/Users/andrew/Code/temp/dynamic-import-bug' => {
  vite:config       dir: '/Users/andrew/Code/temp/dynamic-import-bug',
  vite:config       data: [Object],
  vite:config       hasSideEffects: [Function: hasSideEffects],
  vite:config       webResolvedImports: {},
  vite:config       nodeResolvedImports: {},
  vite:config       setResolvedCache: [Function: setResolvedCache],
  vite:config       getResolvedCache: [Function: getResolvedCache]
  vite:config     },
  vite:config     set: [Function (anonymous)]
  vite:config   },
  vite:config   createResolver: [Function: createResolver],
  vite:config   worker: { format: 'iife', plugins: '() => plugins', rollupOptions: {} },
  vite:config   appType: 'spa',
  vite:config   experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false },
  vite:config   getSortedPlugins: [Function: getSortedPlugins],
  vite:config   getSortedPluginHooks: [Function: getSortedPluginHooks]
  vite:config } +3ms
  vite:deps Hash is consistent. Skipping. Use --force to override. +0ms

  VITE v5.4.3  ready in 98 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
  vite:html-fallback Rewriting GET / to /index.html +0ms
  vite:time 11.91ms /index.html +0ms
  vite:resolve 2.38ms /src/main.jsx -> /Users/andrew/Code/temp/dynamic-import-bug/src/main.jsx +0ms
  vite:load 1.28ms [fs] /src/main.jsx +0ms
  vite:resolve 0.38ms /@vite/client -> /Users/andrew/Code/temp/dynamic-import-bug/node_modules/vite/dist/client/client.mjs +140ms
  vite:load 0.01ms [plugin] /@react-refresh +139ms
  vite:resolve 0.66ms ./App.jsx -> /Users/andrew/Code/temp/dynamic-import-bug/src/App.jsx +5ms
  vite:resolve 0.72ms ./index.css -> /Users/andrew/Code/temp/dynamic-import-bug/src/index.css +0ms
  vite:resolve 0.80ms react/jsx-dev-runtime -> /Users/andrew/Code/temp/dynamic-import-bug/node_modules/.vite/deps/react_jsx-dev-runtime.js?v=9e3b7d7a +0ms
  vite:resolve 0.80ms react -> /Users/andrew/Code/temp/dynamic-import-bug/node_modules/.vite/deps/react.js?v=9e3b7d7a +0ms
  vite:resolve 0.87ms react-dom/client -> /Users/andrew/Code/temp/dynamic-import-bug/node_modules/.vite/deps/react-dom_client.js?v=9e3b7d7a +0ms
  vite:import-analysis /node_modules/.vite/deps/react_jsx-dev-runtime.js?v=9e3b7d7a needs interop +0ms
  vite:import-analysis /node_modules/.vite/deps/react.js?v=9e3b7d7a needs interop +0ms
  vite:import-analysis /node_modules/.vite/deps/react-dom_client.js?v=9e3b7d7a needs interop +0ms
  vite:optimize-deps load /Users/andrew/Code/temp/dynamic-import-bug/node_modules/.vite/deps/react_jsx-dev-runtime.js +0ms
  vite:optimize-deps load /Users/andrew/Code/temp/dynamic-import-bug/node_modules/.vite/deps/react.js +0ms
  vite:optimize-deps load /Users/andrew/Code/temp/dynamic-import-bug/node_modules/.vite/deps/react-dom_client.js +0ms
  vite:import-analysis 3.28ms [5 imports rewritten] src/main.jsx +1ms
  vite:transform 145.48ms /src/main.jsx +0ms
  vite:time 8.09ms /src/main.jsx +149ms
  vite:load 8.88ms [fs] /@vite/client +8ms
  vite:resolve 0.06ms @vite/env -> /Users/andrew/Code/temp/dynamic-import-bug/node_modules/vite/dist/client/env.mjs +5ms
  vite:import-analysis 0.84ms [1 imports rewritten] node_modules/vite/dist/client/client.mjs +3ms
  vite:transform 1.07ms /@vite/client +2ms
  vite:time 11.01ms /@vite/client +2ms
  vite:load 6.64ms [plugin] /node_modules/.vite/deps/react.js?v=9e3b7d7a +4ms
  vite:resolve 0.16ms ./chunk-REFQX4J5.js -> /Users/andrew/Code/temp/dynamic-import-bug/node_modules/.vite/deps/chunk-REFQX4J5.js?v=9e3b7d7a +4ms
  vite:optimize-deps load /Users/andrew/Code/temp/dynamic-import-bug/node_modules/.vite/deps/chunk-REFQX4J5.js +7ms
  vite:import-analysis 0.75ms [1 imports rewritten] node_modules/.vite/deps/react.js?v=9e3b7d7a +4ms
  vite:transform 0.84ms /node_modules/.vite/deps/react.js?v=9e3b7d7a +4ms
  vite:load 7.58ms [plugin] /node_modules/.vite/deps/react_jsx-dev-runtime.js?v=9e3b7d7a +1ms
  vite:import-analysis 0.46ms [1 imports rewritten] node_modules/.vite/deps/react_jsx-dev-runtime.js?v=9e3b7d7a +1ms
  vite:transform 0.62ms /node_modules/.vite/deps/react_jsx-dev-runtime.js?v=9e3b7d7a +1ms
  vite:load 10.34ms [fs] /src/App.jsx +3ms
  vite:load 21.01ms [fs] /src/index.css +11ms
  vite:hmr [self-accepts] src/index.css +0ms
  vite:import-analysis 0.19ms [0 imports rewritten] src/index.css +13ms
  vite:transform 0.73ms /src/index.css +13ms
  vite:time 11.72ms /src/index.css +19ms
  vite:load 19.55ms [fs] /node_modules/vite/dist/client/env.mjs +2ms
  vite:import-analysis 0.01ms [no imports] node_modules/vite/dist/client/env.mjs +2ms
  vite:transform 0.08ms /node_modules/vite/dist/client/env.mjs +2ms
  vite:time 0.32ms /node_modules/vite/dist/client/env.mjs +1ms
  vite:load 23.13ms [plugin] /node_modules/.vite/deps/react-dom_client.js?v=9e3b7d7a +0ms
  vite:import-analysis 7.07ms [1 imports rewritten] node_modules/.vite/deps/react-dom_client.js?v=9e3b7d7a +9ms
  vite:transform 9.61ms /node_modules/.vite/deps/react-dom_client.js?v=9e3b7d7a +9ms
  vite:load 27.45ms [plugin] /node_modules/.vite/deps/chunk-REFQX4J5.js?v=9e3b7d7a +12ms
  vite:import-analysis 0.45ms [no imports] node_modules/.vite/deps/chunk-REFQX4J5.js?v=9e3b7d7a +4ms
  vite:transform 0.96ms /node_modules/.vite/deps/chunk-REFQX4J5.js?v=9e3b7d7a +4ms
  vite:import-analysis 0.24ms [0 imports rewritten] /@react-refresh +0ms
  vite:transform 42.61ms /@react-refresh +0ms
  vite:time 43.04ms /@react-refresh +14ms
  vite:resolve 1.38ms ./assets/react.svg -> /Users/andrew/Code/temp/dynamic-import-bug/src/assets/react.svg +32ms
  vite:resolve 1.47ms ./App.css -> /Users/andrew/Code/temp/dynamic-import-bug/src/App.css +0ms
  vite:resolve 1.49ms ./config -> /Users/andrew/Code/temp/dynamic-import-bug/src/config.js +0ms
  vite:cache [memory] /@react-refresh +0ms
  vite:import-analysis /node_modules/.vite/deps/react_jsx-dev-runtime.js?v=9e3b7d7a needs interop +4ms
  vite:import-analysis /node_modules/.vite/deps/react.js?v=9e3b7d7a needs interop +0ms
  vite:cache [memory] /node_modules/.vite/deps/react_jsx-dev-runtime.js?v=9e3b7d7a +1ms
  vite:cache [memory] /node_modules/.vite/deps/react.js?v=9e3b7d7a +0ms
  vite:hmr [self-accepts] src/App.jsx +19ms
  vite:import-analysis 3.05ms [7 imports rewritten] src/App.jsx +0ms
  vite:transform 31.28ms /src/App.jsx +5ms
  vite:time 35.66ms /src/App.jsx +4ms
  vite:load 1.88ms [plugin] /src/assets/react.svg +7ms
  vite:load 1.88ms [plugin] /vite.svg +0ms
  vite:import-analysis 0.03ms [no imports] src/assets/react.svg +2ms
  vite:import-analysis 0.02ms [no imports] /vite.svg +0ms
  vite:transform 0.47ms /src/assets/react.svg +1ms
  vite:transform 0.51ms /vite.svg +1ms
  vite:cache [304] /vite.svg?import +0ms
  vite:time 0.08ms /vite.svg?import +6ms
  vite:cache [304] /src/assets/react.svg?import +1ms
  vite:time 0.11ms /src/assets/react.svg?import +1ms
  vite:load 8.94ms [fs] /src/App.css +7ms
  vite:hmr [self-accepts] src/App.css +9ms
  vite:import-analysis 0.12ms [0 imports rewritten] src/App.css +7ms
  vite:transform 0.32ms /src/App.css +6ms
  vite:time 0.67ms /src/App.css +1ms
  vite:load 9.46ms [fs] /src/config.js +1ms
  vite:import-analysis 0.14ms [0 imports rewritten] src/config.js +1ms
  vite:transform 0.23ms /src/config.js +1ms
  vite:time 0.97ms /src/config.js +1ms
  vite:load 0.04ms [plugin] /config/development.js?url +8ms
  vite:import-analysis 0.01ms [no imports] /config/development.js?url +8ms
  vite:transform 0.06ms /config/development.js?url +8ms
  vite:time 0.90ms /config/development.js?url +8ms
  vite:time 0.45ms /vite.svg +1ms
  vite:time 0.69ms /node_modules/.vite/deps/react.js.map +1ms
  vite:time 1.64ms /node_modules/.vite/deps/react_jsx-dev-runtime.js.map +1ms
  vite:time 2.99ms /node_modules/.vite/deps/chunk-REFQX4J5.js.map +1ms
  vite:time 12.99ms /node_modules/.vite/deps/react-dom_client.js.map +11ms
  vite:time 0.24ms /vite.svg +3s
  vite:time 0.37ms /src/assets/react.svg +1ms

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.

[sapphi-red]

this used to work fine up to 4.5.2 but in 4.5.3 the import shows as an empty object.

It worked for me with 4.5.2 and 4.5.3. It worked with 5.4.2 and 5.4.3 didn't work. Probably you wrote it wrong?

The change was caused by #17915. The previous behavior that importing a JS file with ?url not returning an URL was a bug. To fix your reproduction, remove ?url from the import URL.

const environmentConfig = await import(
-  /* @vite-ignore */ `/config/${import.meta.env.MODE}.js?url`
+  /* @vite-ignore */ `/config/${import.meta.env.MODE}.js`
);

export const { value = 'This came from config.js' } = environmentConfig ?? {};

[andokai]

It worked for me with 4.5.2 and 4.5.3. It worked with 5.4.2 and 5.4.3 didn't work. Probably you wrote it wrong?

Apologies, it was a typo.

Removing ?url does seem to fix it. I really should write better comments in my code as I'm not sure why it was even in there in the first place.

Apparently Vitest doesn't like importing from the public folder now though but that's a different issue.