Uncaught TypeError: Cannot read property 'appendChild' of null

[anatoliy-t7]

I added code and got error

default.min.js:7 Uncaught TypeError: Cannot read property 'appendChild' of null
    at Object.injectButtonIntoPage (default.min.js:7)
    at Object.start (default.min.js:7)
    at window.deferLoadingAlpine (default.min.js:7)
    at alpine.js:1880
    at alpine.js:2
    at Object../node_modules/alpinejs/dist/alpine.js (alpine.js:5)
    at __webpack_require__ (bootstrap:19)
    at Module../resources/js/bootstrap.js (bootstrap.js:1)
    at __webpack_require__ (bootstrap:19)
    at Module../resources/js/app.js (app.js:1)

[KevinBatdorf]

Hi, what browser/OS?

Here's the code from that error

const styleSheet = document.createElement('style'); 
styleSheet.appendChild(document.createTextNode('.alpine-button-devtools-closed{opacity:1!important}'));
document.head.appendChild(styleSheet);
document.body.appendChild(alpineDevToolsComponent);

Can you also try without the .min? (You can see the line number)

[anatoliy-t7]

• Chrome (85), Mac (Catalina)
• without min. same error
• and my alpine comes in the bundle (it is ok?)

[KevinBatdorf]

I might need to inject the button after the load event. I'll tag a patch in about 5-10 minutes. You can try adding your script to the footer for now to see if that works.

[KevinBatdorf]

Can you update it to 0.8.1 and try? Thanks

[anatoliy-t7]

The button appeared but new error

notyf.es.js:123 Uncaught TypeError: Cannot read property 'appendChild' of null
    at new NotyfView (notyf.es.js:123)
    at new Notyf (notyf.es.js:343)
    at Module../resources/js/app.js (app.js:6)
    at __webpack_require__ (bootstrap:19)
    at Object.0 (app.js:3351)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

[KevinBatdorf]

That's from something else. Are you using Vue or React?

[anatoliy-t7]

Only livewire

[KevinBatdorf]

That error is from this library:

https://github.com/caroso1222/notyf

Does it work fine without the DevTools?

[anatoliy-t7]

Does it work fine without the DevTools?

Yes.

[KevinBatdorf]

That plugin might not be compatible then. I'd have to investigate it. It could be trying to inject something into the popup.

Does everything work if you remove that?
If you're not too tied into that script, you could implement the one I wrote: https://codepen.io/KevinBatdorf/pen/QWyQqZb

[anatoliy-t7]

Without "notyf" everything works fine. And I will try to implement your script.
Thank you.

[KevinBatdorf]

Awesome! The project is still new so any more feedback is very appreciated. Can come to the Alpine Discord too.