Magento 2 RequireJS – Mismatched Anonymous Define()

magento2requirejs

I've added a lot of RequireJS code, but know suddenly it does not work anymore. I get an error 'Mismatched anonymous define()' for code that's added from phtml files. This is the code where the error is thrown:

This is the error is thrown:

How can this suddenly not work anymore?

Update

I think there's something completely off with my JS loading. I get different JS errors each time I load the page:

Update 2

Thanks to Siarhey Uchukhlebau I found the answer. The real error was thrown by an external script (Tawk.to, a chat client). This error caused all kind of weird errors. I will investigate this problem further to check if we can isolated these kind of script to prevent them from messing with our main script.

Best Answer

As I can see in the debug error comes from the online chat script:

https://embed.tawk.to/58f61af6f7bbaa72709c6ddd/default

First, try to remove it from your store, clean cache and make sure that error has gone, then I'll recommend you contact their support team.

Related Solutions

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

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

});

Magento – Magento 2: Mismatched anonymous define() module

As a last resort you could try rendering the contents within Knockout JS as I know that definitely works:

app/code/VENODR/MODULE/view/frontend/templates/knockout-example.phtml

<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "example-scope": {
                    "component": "VENDOR_MODULE/js/knockout-example",
                    "exampleMessage": "<?= __('Hello Magento Stack Exchange!') ?>"
                }
            }
        }
    }
}
</script>

<div data-bind="scope: 'example-scope'">
    <h2 data-bind="text: message"></h2>
</div>

app/code/VENDOR/MODULE/view/frontend/web/js/knockout-example.js

define(['ko'], function(ko) {
    return function(config) {
        this.message = ko.observable(config.exampleMessage);
    }
});

Changing my example message with your variable.