Skip to content

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

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