XF 2.1 Having problems defining a javascript constant inline...

[Jaxel]

I have a page, and in this page, has a macro calling this:

<xf:macro name="firebase">
    <script>
        const firebaseId = "{$xf.options.firebase_id}";
    </script>
    
    <xf:js src="https://www.gstatic.com/firebasejs/5.9.2/firebase-app.js" />
    <xf:js src="https://www.gstatic.com/firebasejs/5.9.2/firebase-firestore.js" />
    <xf:js src="firebase.js" />
</xf:macro>

This is actually loading fine when I call the page by itself.

But if I put this page in a .js-pageTabPanes loader, I get this error when the page loads:

Uncaught ReferenceError: firebaseId is not defined
    at firebase.js?_v=55049e58:5
    at firebase.js?_v=55049e58:81

Why would this work if loaded normally, but not work if loaded dynamically?

 

[Jeremy P]

I think you need to wrap inline scripts in <xf:js> (instead of <script>) for them to be loaded properly on AJAX requests.

 

[Jaxel]

    <xf:js>
        var firebaseId = "{$xf.options.firebase_id}";
    </xf:js>

Doesn't seem to work at all.

 

[Lukas W.]

xf:js only defers inline scripts to the end of the body tag. Instead of trying to fill the global namespace, pass the information as text/json and parse it on runtime. The XF editor does that for example.

 

[Jaxel]

Firebase's constructor has to be declared in the global. Otherwise it throws errors on multiple instances.

 

[DragonByte Tech]

You could try it the other way around; switch everything to <script> tags instead of <xf:js> tags

 

[Jaxel]

xf:js only defers inline scripts to the end of the body tag. Instead of trying to fill the global namespace, pass the information as text/json and parse it on runtime. The XF editor does that for example.

I went with this solution... works great.

    public function renderRaw()
    {
        $this->response->contentType('application/javascript');
        return 'firebaseId = "'.\XF::options()->EWRscoreboard_firebase_id.'";';
    }