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">
    <script src="https://js.braintreegateway.com/web/dropin/1.14.1/js/dropin.min.js" src_type="url"/>

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


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


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

And in my template file:

$braintree = new \Braintree();


$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">
<button id="submit-button">pay</button>

var checkout = document.querySelector('#checkout');
var button = document.querySelector('#submit-button');
require(['dropin'], function(){
    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;


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

2 Answers 2


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?

  • Thanks! I've updated my code / question, I seem to have resolved the Mismatched anonymous define() module but receiving another error now.
    – AJK
    Jan 16, 2019 at 15:53
  • And to answer your last question, I tried including the non-minified version in my layout file but received the same Mismatched anonymous error
    – AJK
    Jan 16, 2019 at 15:57

Moving the external script from requirejs-config.js to require.config in your template file should fix this. So your template file should look like:

var checkout = document.querySelector('#checkout');
var button = document.querySelector('#submit-button');

    paths: {
        dropin: 'https://js.braintreegateway.com/web/dropin/1.14.1/js/dropin.min'

require(['dropin'], function(){

In my case I found that I had to drop the braintree from the code, so instead of braintree.dropin.create it was just dropin.create

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.