Magento – Magento 2: Including External JS – Uncaught Error: Mismatched anonymous define() module

braintreejavascriptmagento2magento2.3

Trying to include an external JS file on a specific page. Currently using the following in my layout:

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
  <head>
    <script src="https://js.braintreegateway.com/web/dropin/1.14.1/js/dropin.min.js" src_type="url"/>
  </head>
</page>

I see the script included in the head of my page but getting the following error:

Uncaught Error: Mismatched anonymous define() module

enter image description here

EDIT:

I've updated my code to the following, which seems to have gotten rid of the Uncaught Error: Mismatched anonymous define() module error:

Vendor/Module/view/frontend/requirejs-config.js:

var config = {
  "map": {
    "*": {
      "dropin": "https://js.braintreegateway.com/web/dropin/1.14.1/js/dropin.min.js"
    }
  }
};

And in my template file:

<?php
$braintree = new \Braintree();

Braintree_Configuration::environment('sandbox');
Braintree_Configuration::merchantId('<<merchantId>>');
Braintree_Configuration::publicKey('<<publicKey>>');
Braintree_Configuration::privateKey('<<privateKey>>');

$clientToken = Braintree_ClientToken::generate();
?>

<div id="dropin-container"></div>
<form name="myform" action="server.php" method="post" id="checkout">
  Enter your Amount: <input type="text" name="amount" value="" id="amount">
  Enter your Company: <input type="text" name="company" value="" id="company">
  <input type="hidden" name="nonce" value="" id ="nonce">
</form>
<button id="submit-button">pay</button>

<script>
var checkout = document.querySelector('#checkout');
var button = document.querySelector('#submit-button');
require(['dropin'], function(){
  braintree.dropin.create({
    authorization: '<?php echo $clientToken ?>',
    container: '#dropin-container'
  }, function (createErr, instance) {
    button.addEventListener('click', function () {
      instance.requestPaymentMethod(function (err, payload) {
        // Submit payload.nonce to your server
        document.getElementById("nonce").value = payload.nonce;
        checkout.submit();

      });
    });
  });
});
</script>

I now see the following script tag the head of my page:

<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="https://js.braintreegateway.com/web/dropin/1.14.1/js/dropin.min.js" src="https://js.braintreegateway.com/web/dropin/1.14.1/js/dropin.min.js"></script>

But I'm now seeing the following error:

Uncaught ReferenceError: braintree is not defined

enter image description here

Best Answer

This error looks to be specific to require.js, in particular:

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.

In your case, I believe you may be trying to load an anonymous define() module somewhere else in your code that has the same name as a module in the loaded dropin.min.js script tag (define(). The require.js docs recommend the following:

  • 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.

Do you encounter the same error when trying to load the un-minified version of the Drop-In?

Related Topic