No loader is configured for ".svg" files with dynamic import

[meowtec]

Describe the bug

Static import for .svg is OK but if we just define a function in which dynamic import .svg, then vite will throw an error No loader is configured for.

This happens since vite@5

// This is OK
import svg from './assets/logo.svg';

function test(name) {
  // This will cause `Failed to scan for dependencies from entries`
  import(`./assets/${name}.svg`)
}

Reproduction

https://stackblitz.com/edit/vitejs-vite-evuxjc?file=main.js

Steps to reproduce

npm run dev

System Info

npmPackages:
  vite: ^5.0.0 => 5.0.2

Used Package Manager

npm

Logs

Error:   Failed to scan for dependencies from entries:
  /home/projects/vitejs-vite-evuxjc/index.html

  ✘ [ERROR] No loader is configured for ".svg" files: assets/logo.svg

    main.js:4:9:
      4 │   import(`./assets/${name}.svg`);
        ╵          ~~~~~~~~~~~~~~~~~~~~~~


    at failureErrorWithLog (/home/projects/vitejs-vite-evuxjc/node_modules/esbuild/lib/main.js:1640:15)
    at eval (/home/projects/vitejs-vite-evuxjc/node_modules/esbuild/lib/main.js:1048:25)
    at runOnEndCallbacks (/home/projects/vitejs-vite-evuxjc/node_modules/esbuild/lib/main.js:1475:45)
    at buildResponseToResult (/home/projects/vitejs-vite-evuxjc/node_modules/esbuild/lib/main.js:1046:7)
    at eval (/home/projects/vitejs-vite-evuxjc/node_modules/esbuild/lib/main.js:1058:9)
    at requestCallbacks.on-end (/home/projects/vitejs-vite-evuxjc/node_modules/esbuild/lib/main.js:1057:54)
    at handleRequest (/home/projects/vitejs-vite-evuxjc/node_modules/esbuild/lib/main.js:721:17)
    at handleIncomingPacket (/home/projects/vitejs-vite-evuxjc/node_modules/esbuild/lib/main.js:746:7)
    at Socket.readFromStdout (/home/projects/vitejs-vite-evuxjc/node_modules/esbuild/lib/main.js:669:7)

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.

[XiSenao]

This may be related to the way esbuild parses dynamic import. For reference. You can replace the original code by following these steps.

// Replaced source code
function test(name) {
  const path = `./assets/${name}.svg`;
  import(path)
}


// Previous source code
function test(name) {
  import(`./assets/${name}.svg`)
}

[XiSenao]

It seems that esbuild internally handles the template expression values of dynamic imports, which cannot be captured through the build.onResolve hook in the vite:dep-scan plugin. The way esbuild handles dynamic imports is slightly different from rollup, which can lead to inconsistent behavior between development and build stages.

[XiSenao]

Importing with import(bar); is not allowed in rollup, while in esbuild it can be achieved by filtering modules through the following:

// This will not be bundled
const path = './data/' + kind + '.json'
const json2 = await import(path)

The two build tools conflict when dealing with this.

[sapphi-red]

I added a workaround for HTML-like files (e.g. .vue, .svelte) in https://github.com/vitejs/vite/pull/14533/files#diff-00039b783552b3f2a608918986716e01b1a71996da1a8ad5493a102a1e969d7bR499-R504
Maybe we need to add that here as well until esbuild calls onResolve for glob imports (evanw/esbuild#3317):

vite/packages/vite/src/node/optimizer/scan.ts

Lines 552 to 570 in 0654d1b

	// css
	build.onResolve({ filter: CSS_LANGS_RE }, externalUnlessEntry)
	// json & wasm
	build.onResolve({ filter: /\.(json|json5|wasm)$/ }, externalUnlessEntry)
	// known asset types
	build.onResolve(
	{
	filter: new RegExp(`\\.(${KNOWN_ASSET_TYPES.join('|')})$`),
	},
	externalUnlessEntry,
	)
	// known vite query types: ?worker, ?raw
	build.onResolve({ filter: SPECIAL_QUERY_RE }, ({ path }) => ({
	path,
	external: true,
	}))