18

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

1
  • 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, 2016 at 8:35

7 Answers 7

39

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
3
  • Is it possible to include prototype.js ? Mar 10, 2016 at 10:37
  • Thank you.. It works for me.. :) +1 from me Jan 24, 2019 at 5:21
  • It's ridiculous, but in my case I had refactored a module and forgot to add the vendor name in the registration.php. It came to this result with no clue that it was regarding that module. May 20, 2021 at 0:19
11

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

1
  • 7
    To enable the developer mode you can hit following command in CLI php bin/magento deploy:mode:set developer Jun 27, 2016 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.

0
1

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!

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

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

0

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.

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.