Magento – Require js error – Mismatched anonymous define() module: function () kakao implementation magento 2

magento2

On test.php over root, login authentication is working fine. While i am trying to implement 'Kakao' login/sign-up process in magento2, I have included 'kakao.js' in the respective login page, its loaded but its giving js error in console "Mismatched anonymous define() module: function ()".

here is the sample code through which I am using to include kakao.js over customer_account_login page –

path – app/code/MyCompany/CustomerAttribute/view/frontend/layout/customer_account_login.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
       <script src="MyCompany_CustomerAttribute::js/kakao.js" order = '5000'/>    
     </head>

I also create a requirejs-config.js file –

path – app/code/MyCompany/CustomerAttribute/view/frontend

var config = {
    map: {
        '*': {
            kakao: 'MyCompany_CustomerAttribute/js/kakao'
        }
    }
};

kakao.js file included on customer login page by override customer_account_login.xml but its giving js error on console – Uncaught Error: Mismatched anonymous define() module: function……require.js 166
Don't know what i am doing wrong.

I also tried by remove override customer_account_login.xml but than its not loading kakao.js

here is thel url of kakao.js – developers.kakao.com/sdk/js/kakao.min.js

Please help me sort-out this.

Best Answer

This is because you're not loading kakao.js via Require JS, with Magento 2 you should be using Require JS to load any JS. THe old XML method is no longer best practice.

You can see more info on the dev docs: - http://devdocs.magento.com/guides/v2.1/javascript-dev-guide/javascript/js_init.html - http://devdocs.magento.com/guides/v2.1/javascript-dev-guide/javascript/requirejs_concept.html

A quick example JS script

define(['jquery', 'kakao'], function($, kakao) {
    'use strict';

    // Initialise Kakao here

});
Related Topic