Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Magento2 not reading my requirejs-config.js

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.

like image 367
Ashutosh Avatar asked Dec 26 '15 16:12

Ashutosh


People also ask

What is RequireJS config JS?

RequireJS is a JavaScript file and module loader. It improves perceived page load times because it allows JavaScript to load in the background. In particular, it enables asynchronous JavaScript loading.

What is shim in magento2?

Shim gives a guarantee to load the dependent files first always. If the dependent file will be not found, your js file will be not loaded. In the above syntax, if the jquery file is not loaded, the slick. js file will be never called on the page.

Why use RequireJS?

Features of RequireJS It reduces code complexity in large applications. It gathers different JavaScript files from different modules at the time of compilation. It allows for easy debugging as it loads the files from plain script tags.


2 Answers

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.

like image 70
Ashutosh Avatar answered Nov 05 '22 21:11

Ashutosh


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";
}
like image 1
Joshua Fricke Avatar answered Nov 05 '22 21:11

Joshua Fricke