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.
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.
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.
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.
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.
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";
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With