php - Using page-specific scripts with Symfony 5 and WebPack in inline script (twig template)

Question

824 votes

1 answers

php - Using page-specific scripts with Symfony 5 and WebPack in inline script (twig template)

Get the solution ↓↓↓

Undefined answered · Answer 1 · 2022-02-7

Answer

Solution:

There are two things to your problem. The first one is that besides defining the entry inwebpack.config, you have to explicitly import your javascript in your html.

You can do that with the twig helper functionencore_entry_script_tags as described in the page specific scripts section of the manual.

So you would add:

{{ encore_entry_script_tags('photo_page') }}
<script>
// Here goes your script
</script>

Or override your block, if you have one, and call{{ parent() }} to include any additional scripts you require in all pages. Note that theentry tag will add thedefer attribute by default, as configured inconfig/packages/webpack_encore.yaml, so you'll need to take that into account and wrap your script to fire on theload event.

The second one is that webpack doesn't expose modules to the global namespace. For that you would have to do it explicitly in your module:

// Instead of exporting the module, you export it to the global scope
// (the browser window in this case)
global.TaggedImage = TaggedImage;

Popular technologies

Latest questions:

php - Using page-specific scripts with Symfony 5 and WebPack in inline script (twig template)

Answer