16

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

  • What about if you want to use some custom js file on all pages, not related to module? What is the right way to do it? Please, don't reference me to Magento official page. – Anitr Dec 6 '16 at 8:35
24

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
  • Is it possible to include prototype.js ? – Slimshadddyyy Mar 10 '16 at 10:37
  • Thank you.. It works for me.. :) +1 from me – Prashant Patil Jan 24 at 5:21
11

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

  • 6
    To enable the developer mode you can hit following command in CLI php bin/magento deploy:mode:set developer – Bhupendra Jadeja Jun 27 '16 at 9:24
7

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.

2

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";
}
0

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!

  • OP doesn't mention whether Apache or Nginx are used. It is almost safe to assume it is Apache. – Chris K Feb 7 '18 at 16:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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