Tailwind-Elements to work with webpack encore defer attribute false

Question

My projects is running with Symfony 5.4 and uses Webpack Encore Bundle. I added Tailwind to it, no problem with that.

When I added Tailwind-Elements (TE) which adds some JS I had the following issue:

• TE works when config/packages/webpack_encore.yml defer script attribute is set to true
• But doesn't work when set to false

I can't set it to true because some other components (such as jQuery) don't work if defer set to true.

Any help would be much appreciated!

Answer 1

Finally managed to make it work!

By default, only one js entrypoint is set (app.js). The solution for me was to:

• Add another js entrypoint, (named it "defer_true_app.js")

• Import tailwind-elements in this new js file

• Add the entry in webpack.config.js:

    .addEntry('defer_true_app', './assets/defer_true_app.js')
  

• config/packages/webpack_encore.yml defer var is still set to false

• In my 'base.html.twig', I added in the {% block javascripts %} the defer_true entrypoint so it looks like this:

    {% block javascripts %}
        {{ encore_entry_script_tags('app') }}
        {{ encore_entry_script_tags('defer_true_app', attributes={ defer: true }) }}
    {% endblock %}
  

•    npm run build
  

And that's it!