0

I'm trying to include Firebase in my website, so I decided to include the dependencies through requirejs. Thing is requirejs can't find my files for some reason.

What I first tried was to load the cdn directly with path:

//app/code/Vendor/Module/view/frontend/web/requirejs-config.js
paths: {
    firebase_app: 'https://www.gstatic.com/firebasejs/7.14.5/firebase-app.js',
    firebase_analytics: 'https://www.gstatic.com/firebasejs/7.14.5/firebase-analytics.js'
}

And then require it

//app/code/Vendor/Module/view/frontend/templates/myTemplate.phtml
<script>
require([
    'jquery',
    'firebase_app',
    'firebase_analytics'
], function ($, firebase, analytics) {

    const firebaseConfig = {
        ...
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    firebase.analytics();
});
</script>

but this just adds an extra .js at the end of the url for some reason:

require.js:1895 GET https://www.gstatic.com/firebasejs/7.14.5/firebase-app.js.js net::ERR_ABORTED 404

So I tried to remove the file extension in the url, but then requirejs looks for the file inside my project folder ?

GET http://siteurl.com/pub/static/frontend/Vendor/Theme/fr_FR/@firebase/app.js net::ERR_ABORTED 404 (Not Found)

I then tried to download the files and place them inside my module directory, under app/code/Vendor/Module/view/frontend/web/js/lib, but I end up with the same results. The one thing I noticed is that the file url seems normal ONLY WHEN the file does not exist:

Correct path

//app/code/Vendor/Module/view/frontend/web/requirejs-config.js
var config = {

    paths: {
        firebase_app: 'Vendor_Module/js/lib/firebase-app',
        firebase_analytics: 'Vendor_Module/js/lib/firebase-analytics'
    }
};

//result
GET http://site_url/pub/static/frontend/Vendor/Theme/fr_FR/@firebase/app.js net::ERR_ABORTED 404 (Not Found)

Wrong path

//app/code/Vendor/Module/view/frontend/web/requirejs-config.js
var config = {

    paths: {
        firebase_app: 'Vendor_Module/js/lib/firebase-apppp', //does not exist
        firebase_analytics: 'Vendor_Module/js/lib/firebase-analytics'
    }
};

//result
require.js:1895 GET http://siteurl.com/pub/static/frontend/Vendor/Theme/fr_FR/Vendor_Module/js/lib/firebase-apppp.js net::ERR_ABORTED 404 (Not Found) 
//actual directory ???

What am I doing wrong ?

0

I ended up using another url defined here https://github.com/firebase/firebase-js-sdk/issues/1266 that seems to be working

I still do not understand why what I tried before is not working. If anyone can find what's wrong, please let me know

-1

So, you set this path: Vendor_Module/js/lib/firebase-app, your file should be here: app/code/Vendor/Module/view/frontend/web/js/lib/firebase-app.js

For the "frontend" keyword you can try with "base" or "adminhtml" - it`s related with the scope of the script usage.

1
  • My file is already there. I meant Vendor/Module, not Vendor_Module*
    – Badong
    May 26 '20 at 12:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.