The require.context() method of webpack results in base64 instead of the original SVG string when loading SVG resources

Author: bgmmdCreated Sep 17, 2025Updated Jan 18, 2026

Vue devtools version

6.6.4

Link to minimal reproduction

https://github.com/vuejs/devtools-v6.git

Steps to reproduce & screenshots

the issue process:

  1. Package the project and upload it to the Chrome extension. When loading the dev Vue page, dev tools encountered an error: Uncaught (in promise) TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator)),This error prevents vue devtools from running properly

  2. After troubleshooting, it was found that this code appears in the icon.ts file: const [, content] = /<svg.+?>(.*)</svg>/.exec(result),Is this question because:**/<svg.+? >The result of (. )</svg>/. exec (result)* is null,null cannot be deconstructed.

3.Trying to print icons (keys) resulted in a base64 string instead of the original SVG string

Image

4.That's why null appears when deconstructing, because the result of icons (keys) is a base64 string, not the original string like this<svg>...</svg>

5.The path where the problem code appears is:/packages/app-frontend/src/features/ui/components/icons.ts

What is expected?

The expected outcome was that the plugin was running normally, but TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator)) error caused vue devtools to not run properly

What is actually happening?

vue devtools to not run properly

System Info

bash
syetem:win11,
browser:chrome139.0.7258.157
package:yarn1.22.22
code version:devtools-6.6.4

Any additional comments?

The path where the problem code appears is:/packages/app-frontend/src/features/ui/components/icons.ts

Image