[SOLVED] Tailwind-Elements to work with webpack encore defer attribute false

Tailwind-Elements to work with webpack encore defer attribute false

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!

Solution

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!