tarteaucitronjs not found using Symfony and Webpack

user_9173278 0
Viewed 525

I have a project based on Symfony 5. I want to install tarteaucitronJS to help manage GPDR permissions.

On my project I have Webpack already installed, I use yarn to install new dependencies.

I've install tarteaucitronJs using : yarn add tarteaucitronjs

Once installed on my app JS I've set the following code :

require('tarteaucitronjs/tarteaucitron.js')

$(document).ready(function() {

    tarteaucitron.init({
        "privacyUrl": "", /* Privacy policy url */

        "hashtag": "#tarteaucitron", /* Open the panel with this hashtag */
        "cookieName": "tarteaucitron", /* Cookie name */

        "orientation": "middle", /* Banner position (top - bottom) */

        "showAlertSmall": false, /* Show the small banner on bottom right */
        "cookieslist": false, /* Show the cookie list */

        "showIcon": true, /* Show cookie icon to manage cookies */
        "iconPosition": "BottomRight", /* Position of the icon between BottomRight, BottomLeft, TopRight and TopLeft */

        "adblocker": false, /* Show a Warning if an adblocker is detected */

        "DenyAllCta" : true, /* Show the deny all button */
        "AcceptAllCta" : true, /* Show the accept all button when highPrivacy on */
        "highPrivacy": true, /* HIGHLY RECOMMANDED Disable auto consent */

        "handleBrowserDNTRequest": false, /* If Do Not Track == 1, disallow all */

        "removeCredit": false, /* Remove credit link */
        "moreInfoLink": true, /* Show more info link */
        "useExternalCss": false, /* If false, the tarteaucitron.css file will be loaded */

        //"cookieDomain": ".my-multisite-domaine.fr", /* Shared cookie for subdomain website */

        "readmoreLink": "", /* Change the default readmore link pointing to tarteaucitron.io */

        "mandatory": true /* Show a message about mandatory cookies */
    });

    console.log('Hello Webpack Encore! Edit me in assets/js/app.js');

});

When I build using: yarn encore dev

Any error appears. But on the console inside my browser, I have the following error:

Uncaught ReferenceError: tarteaucitron is not defined at HTMLDocument. (app.js:20) at mightThrow (jquery.js:3762) at process (jquery.js:3830)

I have no idea about what's I did wrong. Could you explain me what's wrong please?

symfony webpack jquery javascript
1 Answers

You can't require this javascript file like this. The library doesn't support including with tools like webpack.

You need to include the file like this:

<script src="/tarteaucitron/tarteaucitron.js"></script>

<script>
tarteaucitron.init({
 // ...
});
</script>

Or you can use it global:

global.tarteaucitron = require('tarteaucitronjs/tarteaucitron');

See this issue for more details.

user_14059810
Related