Magento2: bug require js

Created on 20 Mar 2017  路  6Comments  路  Source: magento/magento2

Hello I have a problem with require.js, sometimes this it's loaded perfectly and in some cases not. I don't understand where seems to be the issue.
First case when this it's happen: click on the browser url and hit enter nothing will load from that file, and second case when you click back to the previous page, the same problem.
This file it's only called when I refresh page with : ctrl + shift and r
This is my code:

var config = {

deps: [
"js/general",
],

shim: {
'jqueryTooltip': {
deps: ['jquery']
},
'slickSlider': {
deps: ['jquery']
},
'expanderPlugin': {
deps: ['jquery']
},
'customSelect': {
deps: ['jquery']
},
'matchHeight': {
deps: ['jquery']
},
'perfectScrollbar': {
deps: ['jquery']
}
},

paths: {
'jqueryTooltip': 'js/jqueryTooltip',
'slickSlider': 'js/slick',
'expanderPlugin': 'js/expanderplugin',
'customSelect': 'js/customSelect',
'matchHeight': 'js/matchHeight',
'perfectScrollbar': 'js/perfectScrollbar'
}

};

requirejs( [ 'require', 'jquery', 'js/masonry' ],
function( require, $, Isotope ) {
require( [ 'jquery-bridget/jquery-bridget' ],
function( jQueryBridget ) {
jQueryBridget( 'isotope', Isotope, $ );
// Align moodboard
$('.isotope .row-inner').isotope({
itemSelector: '.big-image',
percentPosition: true,
masonry: {
// use outer width of grid-sizer for columnWidth
columnWidth: '.big-image'
}
});
}
);
});

require(["jquery", "jqueryTooltip", "slickSlider", "customSelect", "matchHeight", "perfectScrollbar", "expanderPlugin"],function($){
//my functions
});

Format is not valid

Most helpful comment

I believe it's because you're missing requirejs correct order in some place in your code.
I was calling a jQuery script inside my template file and sometimes jQuery was not loaded when browser was reading the line with the script so I was getting that error!
Anyhow when I've moved to production this bug dissapeared.

All 6 comments

I would suggest that you read about static resources in Magento2 in order to understand how they get published, here's the related part of devdocs

Further on, if you are looking for an advice please refer to the Community Forums or the Magento Stack Exchange site for technical questions. As GitHub issue tracker is intended for reporting the bugs inside Magento2 itself only.
The issues which cannot be consistently reproduced on a clean installation of Magento CE aren't likely to get resolved in here.

I believe it's because you're missing requirejs correct order in some place in your code.
I was calling a jQuery script inside my template file and sometimes jQuery was not loaded when browser was reading the line with the script so I was getting that error!
Anyhow when I've moved to production this bug dissapeared.

Same error here

Magento 2.1.5
PHP 7.0.16/Mysql 5.7.16

A solution for this is to include your plugins like this in your requirejs-config.js:
var config = {

'shim': {
'slickSlider': ['jquery'],
'expanderPlugin': ['jquery'],
'matchHeight': ['jquery'],
'perfectScrollbar': ['jquery'],
},

'paths': {
'slickSlider': 'js/slick',
'expanderPlugin': 'js/expanderplugin',
'matchHeight': 'js/matchHeight',
'perfectScrollbar': 'js/perfectScrollbar'
}

};
And than call your plugin like this:
your theme folder Magento_Theme/layout/default.xml and add this:
http://prntscr.com/f08bjx
In script.phtml add this

general.js is from your theme folder, web/js/yourcustomscripts.js

I hope this will work in your case as well.

@FlaviuParau thank you for your feedback.
If you want to report an issue please format this issue according to the Issue reporting guidelines: with steps to reproduce, actual result and expected result.
Please, also identify which version of Magento you are running.

@FlaviuParau, please refer to the Community Forums or the Magento Stack Exchange site for advice or general discussion about this issue. The GitHub issue tracker is intended for Magento Core technical issues only.

Was this page helpful?
0 / 5 - 0 ratings