1

I have been trying to get the requirejs-config.js to load, but as of yet it will not.. I have followed http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/custom_js.html and put the file like,

/app/design/frontend/<vendor>/<theme>/requirejs-config.js

containing

(function() {
/**
 * WSU something
 */

var config = {
    "paths": {'jquery':'https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js',
        'jquery/ui':'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js',
        'spin':'https://repo.wsu.edu/spine/1/spine.min.js?2015-16-12',
        'datatables':'//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min.js'},
    map:{'*':{'jquery':'https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js',
        'jquery/ui':'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js',
        'spin':'https://repo.wsu.edu/spine/1/spine.min.js?2015-16-12',
        'datatables':'//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min.js'}}
};

require.config(config);
})();

NOTE that I started with

var config = {
    "paths": {'jquery':'https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js',
        'jquery/ui':'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js',
        'spin':'https://repo.wsu.edu/spine/1/spine.min.js?2015-16-12',
        'datatables':'//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min.js'},
    map:{'*':{'jquery':'https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js',
        'jquery/ui':'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js',
        'spin':'https://repo.wsu.edu/spine/1/spine.min.js?2015-16-12',
        'datatables':'//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min.js'}}
};

which is what the doc indicate but also doesn't work..

The issue is it never loads. Just in case I have also run php bin/magento setup:static-content:deploy with not luck.

How do we get the new paths declared

2 Answers 2

1

After much trail this is what boiled out. The location of the requirejs-config.js is correct as the docs indicate,

/app/design/frontend/<vendor>/<theme>/requirejs-config.js

But the why this didn't work was that if you redid the jQuery to a CDN then everything else would fail as the mappings were based on that (as I understand it at this time). This is what I ended up needing to do to get everything to load an show up.

var config = {
    "paths":{
        'jquery':'https://code.jquery.com/jquery-1.11.3.min',
        '_jquery':'jquery/',
        'jquery/ui':'https://code.jquery.com/ui/1.11.4/jquery-ui',
        'jquery/jquery-migrate':'https://code.jquery.com/jquery-migrate-1.2.1.min',
        'spine':'https://repo.wsu.edu/spine/1/spine.min.js?2015-16-12',
        'datatables':'//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min'},
     map: {
        "*": {
            "jquery/jquery.mobile.custom": "/static/frontend/wsu/wsu_base/en_US/jquery/jquery.mobile.custom.js",
            'jquery/jquery.cookie':"/static/frontend/wsu/wsu_base/en_US/jquery/jquery.cookie.js",
            'jquery/jquery.validate':'/static/frontend/wsu/wsu_base/en_US/jquery.validate.js',
            'jquery/jquery.metadata':'/static/frontend/wsu/wsu_base/en_US/jquery/jquery.metadata.js',
            'jquery/jquery-ui-timepicker-addon':'/static/frontend/wsu/wsu_base/en_US/jquery/jquery-ui-timepicker-addon.js'
        }
    },
    "shim": {
        "spine" : ["jquery","jquery/ui"],
        "datatables" : ["jquery","jquery/ui"]
    },deps: [
        "spine",
        "datatables"
    ]
};
3
  • Whilst I wasn't the specific issue I was facing, this answer helped me with my own problem, thanks for sharing
    – Chedaroo
    Dec 7, 2017 at 15:08
  • @jeremy.bass After that how should I use this "datatables" js in require({}) block or in phtml? Jan 3, 2019 at 10:14
  • @chirag the datatables shown is Jquery Datatables, and was initiated in the theme's main JS file on document ready.
    – Quantum
    Jan 5, 2019 at 16:09
0

in official doc for add to theme you need add to /app/design/frontend/<vendor>/<theme>/web/js not as i see in your question /app/design/frontend/<vendor>/<theme>/requirejs-config.js remove rm -rf var/view_preprocessed/* Other think not forget to remove your theme stack in pub static folder:

rm -rf pub/static/<vendor>/<theme>

and run

php bin/magento setup:static-content:deploy

for be sure ...

3
  • I will give it a try but the docs say "3.Place your requirejs-config.js file in one of the following directories ◦Your theme files: <theme_dir>" also php bin/magento setup:static-content:deploy starts with clearing pub/static/ just for your info, I have watched it do that so rm -rf pub/static/<vendor>/<theme> is redundant. Thank you for helping, I'll try moving it to <theme_dir>/web/js/, maybe the docs are off.. not the first time lol
    – Quantum
    Dec 19, 2015 at 22:28
  • also php bin/magento setup:static-content:deploy starts with clearing pub/static/ just for your info, I have watched it do that so rm -rf pub/static/<vendor>/<theme> is redundant is not totally real after tones of test ... you will retour to it
    – Ibnab
    Dec 20, 2015 at 0:10
  • sorry? not sure if I follow. I can see the folder be deleted, and I can find this in the code.. github.com/magento/magento2/blob/… I am still in the belief it is redundant to clear the folders first, redundant in the mind set that your fingures have to type extra stuff and the code will try to do it, not that you can delete an already deleted file again..
    – Quantum
    Dec 20, 2015 at 0:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.