Skip to content

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

Description

@bgmmd

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

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions