search

wire-elements / wire-extender

Wire Extender allows you to embed any Livewire component on any website or even within a static HTML file.
https://wire-elements.dev/blog/embed-livewire-components-using-wire-extender
MIT License
235 stars 8 forks source link

Embed Component in Websites Already Using Livewire/Alpine #30

Open mrfelipemartins opened 2 weeks ago

mrfelipemartins commented 2 weeks ago

Hi! I am trying to embed a Livewire component in a website that is already using Livewire/Alpine, and I’m encountering the following errors in the browser console:

Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'onload')
    at waitForLivewireAndStart (wire-extender.js:64:27)
    at wire-extender.js:103:13
livewire.esm.js:4999 Uncaught (in promise) TypeError: Cannot redefine property: $persist
    at Function.defineProperty (<anonymous>)
    at src_default (livewire.esm.js:4999:14)
    at livewire.esm.js:2766:32
    at Array.forEach (<anonymous>)
    at Object.plugin (livewire.esm.js:2766:17)
    at Object.start (livewire.esm.js:9537:28)
    at startLivewire (wire-extender.js:78:14)

I am wondering if it is possible to embed a Livewire component in a website that already uses Livewire, or if this setup creates conflicts.

Thank you!

PhiloNL commented 2 weeks ago

Could you try deferring the script (add defer to the script tag) and see if that works? :) 

<script src="https://unpkg.com/@wire-elements/wire-extender" data-uri="https://wire-elements.dev" defer></script>