Vue 3 components with slots in vendor folder

646 views Asked by At

I have an issue where I want to extract all my components out into a separate repository but I want to load them in via composer instead of npm (business decision).

This was all working fine. Add it as a dependancy in the composer.json file and then add the following to the webpack.mix.js file;

mix.webpackConfig({
    resolve: {
        alias: {
            '@ui' : path.resolve(__dirname, 'vendor/companyname/ui/src'),
        }
    }
});

And then use the following to import them in;

import PrimaryButton from "@ui/buttons/primary";

Which all worked fine!

Until I wanted to use slots. If I include a slot I get the following error;

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'nodeName')
    at new create (svg.js?1929:3616)
    at globalRef.SVG (svg.js?1929:31)
    at Proxy.mounted (Editor.vue?721f:63)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:154)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:163)
    at Array.hook.__weh.hook.__weh (runtime-core.esm-bundler.js?5c40:2909)
    at flushPostFlushCbs (runtime-core.esm-bundler.js?5c40:357)
    at flushJobs (runtime-core.esm-bundler.js?5c40:393)

In this example the component looks like this;

<template>
    <button @click="click">
        <slot></slot>
    </button>
</template>

<script>
export default {
    emits: ['click'],
    methods: {
        click() {
            this.$emit('click')
        }
    }
}
</script>

Now, if I copy this component into the project repository and load it in that way, there is no error and works as intended!

Can anyone point me in the direction of where I am going wrong please.

Update

I have removed other components from view I'm rendering and now have a new error;

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'isCE')
    at renderSlot (runtime-core.esm-bundler.js?c099:5832)
    at Proxy.render (primary.vue?f782:3)
    at renderComponentRoot (runtime-core.esm-bundler.js?5c40:1166)
    at componentEffect (runtime-core.esm-bundler.js?5c40:5201)
    at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
    at effect (reactivity.esm-bundler.js?a1e9:17)
    at setupRenderEffect (runtime-core.esm-bundler.js?5c40:5154)
    at mountComponent (runtime-core.esm-bundler.js?5c40:5113)
    at processComponent (runtime-core.esm-bundler.js?5c40:5071)
    at patch (runtime-core.esm-bundler.js?5c40:4673)

Update

This is not the answer but the reason for this, from what I can tell is that there were two instances of Vue in play, one from the library and one in my application. I have no idea how to stop this but if I push the contents up to a repo and pull it in via npm then it works normally. Still would like to know how to get this running locally without using npm.

0

There are 0 answers