Native web components created using Rollup's Node-Resolve plugin seem to cause "Operation is not supported" #10365
Description
Vue version
3.3.8
Link to minimal reproduction
https://github.com/jrgleason/jrg/tree/upgrade
Steps to reproduce
So there are 2 folders to be concerned with...
jrg-ui is an example of my web-component library. By running npm i then npm run rollup it will build the library in the target folder.
Next is jrg-next-gen, this is an example of the type of vue/vite application I want to create. I try to add the <jrg-splash> element to the index.html and everything works. I add it to a Vue component and I get...
DOMException: Operation is not supported
createElement runtime-dom.esm-bundler.js:25
mountElement runtime-core.esm-bundler.js:5488
processElement runtime-core.esm-bundler.js:5462
patch runtime-core.esm-bundler.js:5330
mountChildren runtime-core.esm-bundler.js:5590
processFragment runtime-core.esm-bundler.js:5804
patch runtime-core.esm-bundler.js:5316
componentUpdateFn runtime-core.esm-bundler.js:6018
run reactivity.esm-bundler.js:177
update runtime-core.esm-bundler.js:6142
setupRenderEffect runtime-core.esm-bundler.js:6152
mountComponent runtime-core.esm-bundler.js:5920
processComponent runtime-core.esm-bundler.js:5874
patch runtime-core.esm-bundler.js:5342
render2 runtime-core.esm-bundler.js:6663
mount runtime-core.esm-bundler.js:3928
mount runtime-dom.esm-bundler.js:1501
<anonymous> main.js:6
After some playing around I tried to remove the node-resolve plugin on the jrg-ui project and removed MUI and it seems to work so I believe this has something to do with the transpiling(?) for the node-resolve functionality.
As you can see I have the following Vite config
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: tag => tag.startsWith('jrg-')
}
}
}),
vueJsx(),
],
And I even tried setting to
vue': 'vue/dist/vue.esm-bundler.js'
and trying
const app = createApp(App)
app.config.compilerOptions.isCustomElement = tag => tag.startsWith('jrg-')
but didn't help anything
What is expected?
I would like to be able to use native web components from libraries packaged using rollup and node-resolve plugin
What is actually happening?
I get the error mentioned above and the web component does not render.
System Info
No response
Any additional comments?
I know there might not be a bunch of people that build this way so no worries if it takes a while and I will continue to try to tease out more of the issue on my side.