Illegal Constructor on Custom Components
Closed this issue · 8 comments
Heyo! I'm new at this, so might be user error, but: I get the App component to work fine, but when I try to add a custom component, neither the App, nor the customer component load, and I get an Illegal Constructor error in the console. I just made the same MyTestComponent you make in the tutorial. Thanks for any help you can give, can't wait to mess around with Laravel and Svelte!
TypeError: Illegal constructor. app.js:20823:13
SvelteElement http://lsvel.test/js/app.js:20823
App http://lsvel.test/js/app.js:21167
js http://lsvel.test/js/app.js:21069
__webpack_require__ http://lsvel.test/js/app.js:20
0 http://lsvel.test/js/app.js:21270
__webpack_require__ http://lsvel.test/js/app.js:20
<anonymous> http://lsvel.test/js/app.js:84
<anonymous> http://lsvel.test/js/app.js:87
Hey @alteredorange,
sorry to hear you are experiencing issues and that it took me a few days to get to your email.
I will test it today and hopefully, we can either fix the bug or provide more helpful instructions in readme 😅
Kind regards,
g
Hello, I experienced the same issue as @alteredorange
As a workaround, I was able to get everything working correctly by using svelte options and defining the tag name there. To get the example listed in the README, you would add this to the MyTestComponent.svelte
<svelte:options tag="my-test-component" />
and remove the line that defines the custom element
customElements.define('my-test-component', MyTestComponent);
You should then be able to use the component in a blade file just like the doc says.
This is working for me as of the time of this comment, using the latest versions of Laravel and this preset.
Hi,
sorry, I just got around to testing this today. I'm really sorry this happened. All I can say is #COVID-19 and being in work-from-home mode don't make me the best OSS maintainer ever. 😞
Also, huge thanks to @darethas for finding the solution. I actually like it a lot. @darethas if you would like to submit a PR to the README so that you are officially recorded as a contributor, let me know.
On the other hand, maybe we can also ask @yuvrajsab, who has told us to add the README section for the custom element, tell us what all of us are doing wrong. 🤷♂
Kind regards,
g
Hi!,
@darethas's way of registering component is also valid where you can specify tag name within component itself. I was just using approach similar to vuejs but you would still getting that constructor error.
For that, it seems like you cannot use regular svelte component along with custom element
You can convert your regular svelte component into custom element.
Like this:
in /resources/js/app.js
require('./bootstrap');
import App from './components/App.svelte';
import MyTestComponent from './components/MyTestComponent.svelte';
+ customElements.define('my-app', App);
customElements.define('my-test-component', MyTestComponent);
- const app = new App({
- target: document.body,
- });
- window.app = app;
- export default app;in yourfile.blade.php
<body>
- <App />
+ <my-app></my-app>
<my-test-component></my-test-component>
...
</body>Its my fault i didn't explain that quiet well.
in webpack.mix.js
.svelte({
customElement: true,
tag: null, // to get rid of "no custom element tag name" warning because we are defining components tag name it in app.js file. otherwise you would have to put "<svelte:options tag={null} />" in all of your custom elements.
});
Thanks @yuvrajsab for explaining.
I see that @darethas has already made a fork of the repository, so I think he will pull request the changes to the README. Otherwise, I'll amend it later this week.
@morpheus7CS I wanted to yield @yuvrajsab the opportunity first, but yes I certainly don't mind making the change.
@morpheus7CS no problem man.. always happy to help. And @darethas if you have already started working on it then it doesn't matter, go ahead and make those changes.
Now that the README is updated, we can close this one as well. Yay! 🎆
Kind regards,
g