SVG loading issue with Vite

[Deutrix]

I’m experiencing an issue with loading SVG defaultImport as raw in the custom build editor.

I'm using vite-svg-loader and it works as expected when set to 'raw'. However, I need to use a different loader for other purposes, and this is where the problem happens.

I attempted using vite-raw-plugin, but it didn’t resolve the issue. I'm receiving the following error when trying to toolbar with an SVG in CKEditor:

[id].vue:10 CKEditorError: Cannot read properties of null (reading 'getAttribute')
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-Cannot read properties of null (reading 'getAttribute')
    at _IconView._updateXMLContent (iconview.js:69:33)
    at _IconView.render (iconview.js:50:14)
    at _IconView.<anonymous> (observablemixin.js:181:45)
    at _IconView.fire (emittermixin.js:146:47)
    at <computed> [as render] (observablemixin.js:184:29)
    at ViewCollection._renderViewIntoCollectionParent (viewcollection.js:179:18)
    at ViewCollection.<anonymous> (viewcollection.js:63:18)
    at ViewCollection.fire (emittermixin.js:146:47)
    at ViewCollection.addMany (collection.js:106:18)
    at ViewCollection.add (collection.js:75:21)

It seems related to CKEditor’s handling of SVGs, particularly the getAttribute method failing or this.content.trim(). Is there any solution or workaround to load SVGs differently while keeping CKEditor functional?

Any help or suggestions would be appreciated!

[Witoso]

Please share the information about the used version of the editor and integration packages.

[Deutrix]

Using following versions:

"ckeditor5": "^43.0.0"
"@ckeditor/ckeditor5-vue": "^7.2.0"
"vite": "5.3.5" with "vite-svg-loader": "5.1.0"

[Witoso]

I wonder it it's an SVG issue, CKEditor inlines all SVGs in the build process currently. Could you prepare a reproducible sample for us?