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

Question 1

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

Question 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?

Question 3

Thanks! I've updated my code / question, I seem to have resolved the Mismatched anonymous define() module but receiving another error now.

Question 4

And to answer your last question, I tried including the non-minified version in my layout file but received the same Mismatched anonymous error

Question 5

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');
require.config({
 paths: {
 dropin: 'https://js.braintreegateway.com/web/dropin/1.14.1/js/dropin.min'
 }
 });
require(['dropin'], function(){
 braintree.dropin.create({
 ...
 });
});

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

hollabaq 1213 bronze badges · Answer 1 · 2019-01-16 15:26:44Z

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.
And to answer your last question, I tried including the non-minified version in my layout file but received the same Mismatched anonymous error

wr125 1511 silver badge17 bronze badges · Answer 2 · 2020-07-16 13:55:39Z

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');
require.config({
 paths: {
 dropin: 'https://js.braintreegateway.com/web/dropin/1.14.1/js/dropin.min'
 }
 });
require(['dropin'], function(){
 braintree.dropin.create({
 ...
 });
});

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

Stack Exchange Network

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

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

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

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related

Hot Network Questions