Mismatched anonymous define module

Question

I m getting this error when I browse my webapp for the first time  usually in a browser with disabled cache       Error  Mismatched anonymous define   module  function  require      HTML    lt html gt                     lt script src    ajax googleapis com ajax libs jquery 1 8 0 jquery min js  gt  lt  script gt      lt script gt  var require     urlArgs   v 0 4 1 32      lt  script gt      lt script data-main  assets js main  src  assets js libs require js  gt  lt  script gt      lt script src  assets js ace ace js v 0 4 1 32  gt  lt  script gt      lt  body gt   lt  html gt    JS     function          define function  require               do something               Anyone know exactly what this error means and why its happening   source file  a short discussion about it in the github issues page

User · Answer

The existing answers explain the problem well but if including your script files using or before requireJS is not an easy option due to legacy code a slightly hacky workaround is to remove require from the window scope before your script tag and then reinstate it afterwords. In our project this is wrapped behind a server-side function call but effectively the browser sees the following:

    <script>
        window.__define = window.define;
        window.__require = window.require;
        window.define = undefined;
        window.require = undefined;
    </script>
    <script src="your-script-file.js"></script>        
    <script>
        window.define = window.__define;
        window.require = window.__require;
        window.__define = undefined;
        window.__require = undefined;
    </script>

Not the neatest but seems to work and has saved a lot of refractoring.

User · Answer

I had this error because I included the requirejs file along with other librairies included directly in a script tag  Those librairies  like lodash  used a define function that was conflicting with require s define  The requirejs file was loading asynchronously so I suspect that the require s define was defined after the other libraries define  hence the conflict   To get rid of the error  include all your other js files by using requirejs

User · Answer

Per the docs   If you manually code a script tag in HTML to load a script with an anonymous define   call  this error can occur  Also seen if you manually code a script tag in HTML to load a script that has a few named modules  but then try to load 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  Finally  if you use the loader plugins or anonymous modules  modules that call define   with no string ID  but do not use the RequireJS optimizer to combine files together  this error can occur  The optimizer knows how to name anonymous modules correctly so that they can be combined with other modules in an optimized file  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

User · Answer

Or you can use this approach    Add require js in your code base then load your script through that code    lt script data-main  js app js  src  js require js  gt  lt  script gt   What it will do it will load your script after loading require js

User · Answer

Like AlienWebguy said  per the docs  require js can blow up if   You have an anonymous define   modules that call define   with no string ID   in its own script tag  I assume actually they mean anywhere in global scope  You have modules that have conflicting names You use loader plugins or anonymous modules but don t use require js s optimizer to bundle them   I had this problem while including bundles built with browserify alongside require js modules  The solution was to either   A  load the non-require js standalone bundles in script tags before require js is loaded  or  B  load them using require js  instead of a script tag

User · Answer

In getting started with require js I ran into the issue and as a beginner the docs may as well been written in greek  The issue I ran into was that most of the beginner examples use  quot anonymous defines quot  when you should be using a  quot string id quot   anonymous defines define function             return   helloWorld  function     console log  hello world                     define function             return   helloWorld2  function     console log  hello world again              define with string id define  moduleOne  function         return   helloWorld  function     console log  hello world              define  moduleTwo   function           return   helloWorld2  function     console log  hello world again             When you use define with a string id then you will avoid this error when you try to use the modules like so  require    quot moduleOne quot    quot moduleTwo quot     function moduleOne  moduleTwo        moduleOne helloWorld        moduleTwo helloWorld2

User · Answer

Be aware that some browser extensions can add code to the pages  In my case I had an  Emmet in all textareas  plugin that messed up with my requireJs  Make sure that no extra code is beign added to your document by inspecting it in the browser

User · Answer

I was also seeing the same error on browser console for a project based out of require js  As stated under MISMATCHED ANONYMOUS DEFINE   MODULES at https   requirejs org docs errors html  this error has multiple causes  the interesting one in my case being  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  As it turns out  Google Closure compiler was getting used to merge minify the Javascript code during build  Solution was to remove the Google closure compiler  and instead use require js s optimizer  r js  to merge the js files

[javascript] Mismatched anonymous define() module

Examples related to javascript

Examples related to jquery

Examples related to requirejs