Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'styleMap') at #k (xel.js:1:51212)

[hwqchi]

What I have done

Here follows parts of my projects:

Problem

I installed the Xel according to the Setup steps, but I got some errors when running my projects.
Besides, the css stylesheets could not display properly.

So I guess it seems have something to do with "xel-accent-color" meta tag.
Then, I tried to delete the line <meta name="xel-accent-color" content="blue">, but new errors arise:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'trim')
at E.parse (xel.js:1:7484)
at #k (xel.js:1:51113)

Other Info

[Environment]
Microsoft Edge 110.0.1587.50
Windows11
Node.js 18.14.1

[Dependencies]
vite: 4.1.3
vue: ^3.2.47
xel: ^0.19.0
@vitejs/plugin-vue: ^4.0.0
electron: 23.1.0

[jarek-foksa]

The problem is caused by this line:

<meta name="xel-theme" content="node_modules/xel/themes/adwaita.css">

Are you sure that the path node_modules/xel/themes/adwaita.css is actually accessible? Please also try moving <script src="node_modules/xel/xel.js" type="module"></script> below all <meta> tags.

[hwqchi]

Yes, you are literally right about this. It is the path issue that caused these errors.
But there are some problems that confused me a lot.
I moved the line <script src="node_modules/xel/xel.js" type="module"></script> below all <meta> tags. It still won't work.
After I did following steps below, I found something so weird.

Solution1

The css is applied in the page properly. But the warnings still exsit.

Solution2

The css is applied in the page properly as well. But the warnings still exsit.

Warnings

[Vue warn]: Failed to resolve component: x-icon
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <BookMarkTable> 
  at <App>

I guess it might be associated with the compatibility of Vue3. Is there any solution to get rid of these warnings?

What confused me

I have figured it out it is the path problem that caused these errors above. Then, why would some resources, like .svg and .js files be accessible? Why .css files not?

Thanks a lot.

[jarek-foksa]

I have never used Vue so I'm afraid I can't help you to get rid of these warnings. You seem to be using some preprocessor to compile main.js, but I have no idea what logic is used to resolve relative URLs.