I am miggrating an old big symfony web app to webpack encore. For now, I installed all js libraries, but I found a problem: Uncaught ReferenceError: xxx is not defined
My structure is the next.
- common.js where I import js libraries that I was used in a lot of pages (like resize-sensor).
- base.html.twig where I call {{ encore_entry_script_tags('common') }}
- Final views which extends base.html.twig
In common.js I load librarys: Ej. import 'resize-sensor';
In a view I try to use: new ResizeSensor(jQuery('#div-left'), function(){fixElements();});
I got this error: "Uncaught ReferenceError: ResizeSensor is not defined"
I had to import jquery, highcharts and confirmation2 globally, but I am not sure that i want to do this with all libraries.
So is there any way to import all content from common in all views which extends from base?
CodePudding user response:
In a view I try to use: new ResizeSensor(jQuery('#div-left'), function(){fixElements();});
Importing libs in your js-files, doesn't make then "available" in global scope. So you can't just use them in your views like
{% block javascripts %}
{{ parent() }}
<script>
$(function(){
new ResizeSensor(jQuery('#div-left'), function(){fixElements();});
});
</script>
{% endblock %}
They are actually available only in that file (common.js)
You could try to use special global.
syntax OR you try to make them as autoProvidedVariables
. You have to play around which works best for you
global
// in your common.js
import ResizeSensor from 'resize-sensor';
global.ResizeSensor = ResizeSensor; // now is ResizeSensor available globaly
autoProvideVariables
// in webpack.config.js
.autoProvidejQuery()
.autoProvideVariables({
ResizeSensor: require.resolve('resize-sensor'),
}
now you could use them in your views.