How to load jQuery Migrate for jQuery via RequireJS?

Question

Can I load jQuery migrate via RequireJS? I don't understand how the timing can be handled correctly. See this example:

require([
  'jquery',
  'jqmigrate'
], function ($) {
  if ($.browser.msie) {...}
});

Isn't is possible that jqmigrate will load before jquery? Also, I do not want to keep loading jqmigrate explicitly in every module. Any way to do this in the require.config so it loads jqmigrate automatically when jQuery is required?

Aman

Answer 1

using shims worked for me. I did get stuck because i had pluralized shims its; shim

requirejs.config({
    paths: {
        'jquery': '//code.jquery.com/jquery-2.1.4',
        'jquery-migrate': '//code.jquery.com/jquery-migrate-1.2.1'
    },
    shim: {
        'jquery-migrate': { deps: ['jquery'], exports: 'jQuery' },
        'foo': ['jquery']
    }
});
require(['jquery-migrate', './foo'], ($, foo) => {
     console.log('bootstrapped', $, foo);
});

Herrick

I know this is an old post but this shim description was exactly what I needed. Thank you! – Canton

Answer 2

There are a couple of things you will need:

1. make sure jqmigrate depends on jquery.
2. you could write a wrapper module that include both, and return jquery, so your require.config could look like:

jquery-wrapper.js:

define(['jquery-src', 'jqmigrate'], function ($) {
  return $;
})

require.config

{
  paths: {
    'jquery-src' : '/path/to/jquery',
    'jqmigrate': '/path/to/jqmigrate',
    'jquery': '/path/to/jquery-wrapper'
  }
}

Barina

I had to remove the $ from the function params before this method would work for me, otherwise $ was undefined. – Gosnell

This probably means you were taking it from the global scope and not from the requireJS module. – Barina

I quite possibly am now, but I thought it was strange that the the return value of jquery-src, which I assumed would be the jQuery instance was not populated in $. – Gosnell

Additionally, I made use of shim in the config to ensure jqmigrate has a dependency on jquery-src, since the jqmigrate library doesn't have any AMD awareness, and relies on jQuery already being present in the global scope. – Gosnell

Answer 3

jQuery Migrate 3.0.1 currently has a defect that renders it unusable for RequireJS or any AMD loader. A change is required to the UMD fragment before implementing the accepted answer:

define( [ "jquery" ], function ($) {
    return factory($, window);
});

Details and solution are here.

Alloy

This appears to now be fixed on 22nd March 2018 – Kelwin

@NickMiddleweek that specific topic was closed on the 22nd of march. But this will only be added to the 3.1.0 version – Gati

Answer 4

jquery-migrate-wrapper.js

    define(['jquery', 'jquery-migrate'], function ($) {
        // additional initialization logic can be added here
        $.UNSAFE_restoreLegacyHtmlPrefilter();
        return $;
    })

require-config.js

  require.config({
    ...otherConfigOptions,
    shim: {
      ...otherShimSettings,
      'jquery-migrate':{deps: ['jquery']},
    },
    map: {
      // provides 'jquery-migrate-wrapper' for all (*) modules that require'jquery'
      '*': { 'jquery': 'jquery-migrate-wrapper' },
      // but provides the original 'jquery' for 'jquery-migrate-wrapper' and       
      // 'jquery-migrate'
      'jquery-migrate-wrapper': { 'jquery': 'jquery' },
      'jquery-migrate': {'jquery': 'jquery'}
    }
  })

Flapdoodle