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.

From the plugin side....

https://github.com/rollup/plugins/issues/1683