Uncaught Error: Mismatched anonymous define() module

Question 1

I'm trying to use jquery in an adminhtml js file...but it seems not to be working and can't get to understand why...any help would be appreciated !

Layout is like

<head>
 <script src="Vendor_Module::js/logger.js"/>
</head>

Js file is like

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

But this throw me the error :

require.js:166 Uncaught Error: Mismatched anonymous define() module: function ($) {

'use strict';

}

http://requirejs.org/docs/errors.html#mismatch at makeError (require.js:166:17) at intakeDefines (require.js:1221:36) at require.js:1408:25

Question 2

Instead of code

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

Try require, like this:

 require([
 'jquery'
 ], function($){
 //code here
 });

"define" actually trying to add jquery to you DOM, which is probably loaded already, so instead of define use require

Question 3

Thanks; but in that case why is all commercial modules uses define inside their js files. I also manage to get this working adding a domcontent load condition...sometime it works on the first time, sometimes i need to relead the page one time to make it work. The behaviour is really strange. What you say make sense to me, I will try it. But it's weird that in that case all custom and commercial modules doest not use require instead of define. Cause obviously jquery gonna be already defined in everyprojects.

Question 4

It's working. But i don't understand everything behind ^^

Question 5

load your js using requirejs-config.js (instead of a script tag) will also resolve your issue. The main issue is that you have probably loaded your script in xml instead of requirejs-config.js

Question 6

I also tried using requirejs though; may be the wrong way. Thanks for your assistance :)

Question 7

Hi there please try this below example in order to call your JS file from the head tag:

Please use this link on why we should not use the define directly.

In your layout handle file something like this which is present already = sales_order_view.xml use the below sample code

<?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>
 <link src="Sample_Module::js/order-post-action.js"/>
 </head>
</page>

Please use this file in this path = app/code/Sample/Module/view/adminnhtml/web/js/order-post-action.js

require([
 'Sample_Module/js/restore-order'
]);

After that use this file again in this path = app/code/Sample/Module/view/adminhtml/web/js/restore-order.js where you are defining it

define([
 'jquery',
 'Magento_Ui/js/modal/confirm',
 'mage/translate'
], function (,ドル confirm) {
 'use strict';
});

If this answer helped you , please do a give a like as this helps me answer more. Thanks.

Question 8

What is the role of app/code/Sample/Module/view/adminnhtml/web/js/order-post-action.js I don't get it ? Cause my js file already load, the issue isn't there but on the define method fromt he lib. I will try though.

Question 9

Okay @Claims please try and let me know if this works, I'll update why is this solution and all in this post soon. Thanks.

Question 10

@Claims , Please check the answer i have updated with the link.

Shoaib Munir Shoaib Munir 9,59210 gold badges54 silver badges109 bronze badges · Accepted Answer · 2022-10-10 03:18:33Z

6

Instead of code

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

Try require, like this:

 require([
 'jquery'
 ], function($){
 //code here
 });

"define" actually trying to add jquery to you DOM, which is probably loaded already, so instead of define use require

Share

Improve this answer

answered Oct 10, 2022 at 3:18

Shoaib Munir's user avatar

Shoaib Munir Shoaib Munir

9,59210 gold badges54 silver badges109 bronze badges

4

Thanks; but in that case why is all commercial modules uses define inside their js files. I also manage to get this working adding a domcontent load condition...sometime it works on the first time, sometimes i need to relead the page one time to make it work. The behaviour is really strange. What you say make sense to me, I will try it. But it's weird that in that case all custom and commercial modules doest not use require instead of define. Cause obviously jquery gonna be already defined in everyprojects.

Clong
– Clong

2022年10月10日 08:14:02 +00:00
Commented Oct 10, 2022 at 8:14
It's working. But i don't understand everything behind ^^

Clong
– Clong

2022年10月10日 14:29:32 +00:00
Commented Oct 10, 2022 at 14:29
1

load your js using requirejs-config.js (instead of a script tag) will also resolve your issue. The main issue is that you have probably loaded your script in xml instead of requirejs-config.js

Shoaib Munir
– Shoaib Munir

2022年10月11日 04:20:38 +00:00
Commented Oct 11, 2022 at 4:20
I also tried using requirejs though; may be the wrong way. Thanks for your assistance :)

Clong
– Clong

2022年10月11日 07:11:08 +00:00
Commented Oct 11, 2022 at 7:11

Add a comment |

Stack Exchange Network

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

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