I passed a variable from phtml to js it's working fine but it shows "Mismatched anonymous define() module" error in console.

Phtml File:

<?php $myVar = "This is my value" ?>

<script type="text/x-magento-init">
        "*": {
            "Prince_Faq/js/faq": {
                "animateSpeed": "<?php echo $myVar ?>"

I tried after changing define() to require(), The error was gone but variable not getting value from config.

Js File:

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

    return function (config) {
        alert(config.animateSpeed); //Not getting value after changing to require()
  • What is returned if you add console.log(config)? – Ben Crook Jun 9 '17 at 8:31
  • It's returned my values which is passed from phtml file. but it's not working when I use require() in js – Prince Patel Jun 9 '17 at 8:34

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


<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!') ?>"

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


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

Changing my example message with your variable.

  • Thank you for your solution. I tried this solution, it passes the variable but still error still there. – Prince Patel Jun 9 '17 at 9:06
  • It could be another script causing the issue, most times I've seen this error it was when an AMD script had been included via XML rather than Require JS. It's not too easy to debug :( – Ben Crook Jun 9 '17 at 9:28
  • It's coming from my custom js. I confirm that after removing script or also check after changing define() to require(). But require is not responsible for getting config values. – Prince Patel Jun 9 '17 at 9:44

According to the Require JS docs it's on of the following cases:

  • Be sure to load all scripts that call define() via the RequireJS API. Do not manually code script tags in HTML to load scripts that have define() calls in them.

  • If you manually code an HTML script tag, be sure it only includes named modules, and that an anonymous module that will have the same name as one of the modules in that file is not loaded.

  • If the problem is the use of loader plugins or anonymous modules but the RequireJS optimizer is not used for file bundling, use the RequireJS optimizer.

  • If the problem is the var define lint approach, use /*global define */ (no space before "global") comment style instead.

If you manually code a script tag in HTML to load a script with an anonymous define() call, this error can occur.

If you manually code a script tag in HTML to load a script that has a few named modules, but then try to load an anonymous module that ends up having the same name as one of the named modules in the script loaded by the manually coded script tag.

If you use the loader plugins or anonymous modules (modules that call define() with no string ID) but do not use the RequireJS optimizer to combine files together, this error can occur. The optimizer knows how to name anonymous modules correctly so that they can be combined with other modules in an optimized file.

If you use var define; at the top of your file for jshint/jslint purposes, this will cause a problem for the optimizer because it avoids parsing files that declare a define variable, since that may indicate a script that was created by a concatenation of some scripts that use a local define.

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.