<p>How can a script loaded as an ES module be reinitiated after changes are made in Live Preview? In my experience a script loaded as a module is  executed the first time Live Preview is opened, but then isn’t executed on subsequent loads as the page refreshes with edited content.</p>

<p>According to <a href="https://jakearchibald.com/2017/es-modules-in-browsers/#modules-only-execute-once" rel="nofollow noreferrer">this article</a>, modules will only execute once per page. I’m including a function that is executed on the window’s <code>load</code> event and it is fired each time Live Preview is updated — which makes me think the script should be loaded and executed each time Live Preview updates.</p>

<p>Here's a simplified case. Include a script that alerts some text when the script is loaded and on the window’s <code>load</code> event.</p>

<pre><code>alert('Script Loaded')

window.addEventListener('load', () =&gt; {
    alert('Window Loaded')
})

</code></pre>

<p>Include it in the page as a module:</p>

<pre><code>&lt;script type="module" src="app.js"&gt;&lt;/script&gt;
</code></pre>

<p>Open Live Preview and the alerts fire. Make a change, page refreshes, content is updated — no alerts. </p>

<p>Include it as a regular script</p>

<pre><code>&lt;script src="app.js"&gt;&lt;/script&gt;
</code></pre>

<p>Open Live Preview and the alerts fire. Make a change, page refreshes, content is updated — alerts fire again.</p>

<p>I’m working around it by loading a legacy <code>nomodule</code> version of the script  in Live Preview, but curious if there is another solution or event to listen for to trigger the JS to execute again when Live Preview is updated.</p>

<pre><code>{#
 # Load legacy JS in Live Preview because modules
 # aren’t executed after the page reloads
/#}
{% if craft.app.request.isLivePreview %}
    &lt;script src="app.js"&gt;&lt;/script&gt;
{% else %}
    &lt;script type="module" src="app.js"&gt;&lt;/script&gt;
{% endif %}
</code></pre>

CC BY-SA 4.0
2019-01-09T16:34:44.063Z
Sounds like something P&T will have to attempt to fix in Craft... and we'll have to work around for now. I'd file a GitHub issue.
andrew.welch
CC BY-SA 4.0
2019-01-09T20:14:40.527Z
@andrew.welch  Opened an issue https://github.com/craftcms/cms/issues/3611
Stephen Bowling
<javascript><live-preview>
Can scripts loaded as ES Modules work with Live Preview?
# Can scripts loaded as ES Modules work with Live Preview?

(Asked by: username_0 on 2019-01-09)

How can a script loaded as an ES module be reinitiated after changes are made in Live Preview? In my experience a script loaded as a module is  executed the first time Live Preview is opened, but then isn’t executed on subsequent loads as the page refreshes with edited content.
According to this article, modules will only execute once per page. I’m including a function that is executed on the window’s load event and it is fired each time Live Preview is updated — which makes me think the script should be loaded and executed each time Live Preview updates.
Here's a simplified case. Include a script that alerts some text when the script is loaded and on the window’s load event.
alert('Script Loaded')

window.addEventListener('load', () => {
    alert('Window Loaded')
})


Include it in the page as a module:


Open Live Preview and the alerts fire. Make a change, page refreshes, content is updated — no alerts. 
Include it as a regular script


Open Live Preview and the alerts fire. Make a change, page refreshes, content is updated — alerts fire again.
I’m working around it by loading a legacy nomodule version of the script  in Live Preview, but curious if there is another solution or event to listen for to trigger the JS to execute again when Live Preview is updated.
{#
 # Load legacy JS in Live Preview because modules
 # aren’t executed after the page reloads
/#}
{% if craft.app.request.isLivePreview %}
    
{% else %}
    
{% endif %}

**Tags:** javascript, live-preview
> **Comments:**
> **username_1**: Sounds like something P&T will have to attempt to fix in Craft... and we'll have to work around for now. I'd file a GitHub issue.  
> **username_0**: @andrew.welch  Opened an issue https://github.com/craftcms/cms/issues/3611  

---

## 0 answers

