Magento2 not reading my requirejs-config.js

Question

Hi I'm new to Magento2 and trying to figure out how RequireJS works in Magento.

Here is my situation:

I have following module:

app/code/Mymodule/Test/view/frontend/requirejs-config.js

Here is the content of this file:

var config = {
map: {
    '*': {
        jQuery110: "Mymodule_Test/js/jquery-1.10.2",
        jqueryNoConflict: 'Mymodule_Test/js/jquery.no-conflict',
        flexslider: 'Mymodule_Test/js/jquery.flexslider-min',
        header: 'Mymodule_Test/js/store/header'
    }
}
};

My theme is at this location:

app/design/frontend/Mycompany/Basic

My Javascripts are at following location:

app/code/Mymodule/Test/view/frontend/web/js/jquery.no-conflict.js
app/code/Mymodule/Test/view/frontend/web/js/jquery.flexslider-min.js
app/code/Mymodule/Test/view/frontend/web/js/store/header.js

In the PHTML file:

app/code/Mymodule/Test/view/frontend/templates/home.phtml

I added the lines:

require(['jqueryNoConflict', 'flexslider'],function($, flexslider){
    (function($) {
        $(window).load(function () {
            $('.flexslider').flexslider();
        });
    })(jQuery);
});

When I check my page in browser, I get 404 error with paths:

http://mag2.com.local/pub/static/frontend/Mycompany/Basic/en_US/flexslider.js

But if I change the require[] line to this:

 require(['Mymodule_Test/js/jquery.no-conflict', 'Mymodule_Test/js/jquery.flexslider-min'],function($, flexslider){
        (function() {
            $(window).load(function () {
                $('.flexslider').flexslider();
            });
        })(jQuery);
    });

the files are loading.

I also cleared the cache, my theme is correct, I executed the command:

php bin/magento setup:static-content:deploy

So, I am not able to figure out why my requirejs-config.js is not loading. I followed the documentation as well.

Please help

Answer 1

I found the problem.

Under pub/static/_requirejs/frontend/Namespace/Theme/en_US, delete the file requirejs-config.js.

Refresh your page and it will be generated again with new content.

If it doesn't work delete the requirejs-config.js and run the following commands:

php bin/magento cache:clean
php bin/magento cache:flush
php bin/magento setup:upgrade
php bin/magento setup:di:compile

Answer 2

The problem is that you did not enable developer mode. As a result, the files cache is in the pub/static folder.

Answer 3

After Deploy command, You have to set developer mode and clear cache. Its working fine.

php bin/magento deploy:mode:set developer && php bin/magento cache:clean

Also clear browser cache to see effect.

Answer 4

This may help someone else with a very similar issue on local with nginx. The /static block was not rewriting correctly and this needed to be added per this comment https://github.com/magento/magento2/issues/7869#issuecomment-268585438

location /static/ {
    if ($MAGE_MODE = "production") {
      expires max;
    }

    # Remove signature of the static files that is used to overcome the browser cache
    location ~ ^/static/version {
      rewrite ^/static/(version\d*/)?(.*)$ /static/$2 last;
    }

    location ~* \.(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2)$ {
      add_header Cache-Control "public";
      add_header X-Frame-Options "SAMEORIGIN";
      expires +1y;

      if (!-f $request_filename) {
        rewrite ^/static/(version\d*/)?(.*)$ /static.php?resource=$2 last;
      }
    }

    location ~* \.(zip|gz|gzip|bz2|csv|xml)$ {
      add_header Cache-Control "no-store";
      add_header X-Frame-Options "SAMEORIGIN";
      expires off;

      if (!-f $request_filename) {
         rewrite ^/static/(version\d*/)?(.*)$ /static.php?resource=$2 last;
      }
    }

    if (!-f $request_filename) {
      rewrite ^/static/(version\d*/)?(.*)$ /static.php?resource=$2 last;
    }

    add_header X-Frame-Options "SAMEORIGIN";
}

Answer 5

You can follow below steps and it will be fix.

1) Set deploy mode to production - php magento deploy:mode:set production (js and css minification will works with production mode.If you are in developer mode with code minified above issues will show up as I experienced it. If minification disabled you can keep the developer mode. Also verify using echo the print_r($_SERVER) in index.php that production mode or developer mode correctly set before load the website)

2) Clear all the caches setup in server

• /etc/init.d/nginx restart
• /etc/init.d/php5.6-fpm restart
• /etc/init.d/varnish restart

3) Clear the browser cache and view it in incognito mode. That's it!

Cheers!

Answer 6

For me the solution was that I had named the file wrong on file creation..

I had named the file require-config.js instead of requirejs-config.js

By renaming the file to requirejs-config.js it started working.

Answer 7

Please make sure .htaccess file exist in pub/static folder. and then apply deploy command.