Webpack Encore + Symfony - Use modules loaded from base

user_17128882 0
Viewed 211

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?

symfony webpack javascript
1 Answers

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.

user_3481930
Related