1

In my environment implemented Bootstrap 4 in Magento 2.2.5 at first glance it seemed to work. all of my js and css worked perfectly without any error's. But after sometime, I got error: Uncaught Error: Mismatched anonymous define() module: function (exports, $) { 'use strict'; Line 141 Require.js. I followed the instructions given by Manoj Deswal and Vivek Magento 2 : Add Bootstrap 4 in theme

It seems that the css as in grid system and so on still works, its just that the js/jquery is giving me troubles.

It worked as I said be for, but what ever I try, the error does not disappear.

Does anyone has a suggestion?

Full error Message : https://pastebin.com/103izvSJ Disclaimer, it is one heck of a error!

I have found out it is just the bootstrap.bundle.js is giving me this error. the file as a hole is giving me: ' Mismatched anonymous define() module: function (exports, $) { 'use strict';' i have linked it in my Default_head_block.xml, and i have linked it in the Requiredjs-config.js file as followed, (correct me if im wrong): paths: { 'jquery/ui': 'jquery/jquery-ui', 'bootstrap':'Magento_Theme/js/bootstrap.bundle' }, shim: { 'bootstrap': { 'deps': ['jquery'] } },

and i added <script type="text/javascript"> require(['bootstrap']); </script>

In the header.phtml file as instructed. but it just won't stop giving me an error.

i even try'ed to link it by external source, but it gives me the same error as befor, or something like net::ERR 404, Not found.

Nugget
  • 11
  • 2

1 Answers1

0

This is one of the common error of requirejs.

To avoid the error:

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

Reference: https://requirejs.org/docs/errors.html#mismatch

I hope this will help

Muhammad Hasham
  • 8,692
  • 11
  • 47
  • 105
  • all of my scripts are from Bootstrap 4 js. else are from magento 2 self. other than that i can't really figure out why it keeps messing up the bootstrap 4 js files. – Nugget Mar 12 '19 at 12:10