JavaScript loaded as module isn’t executed after Live Preview refreshes
Nobody has claimed this yet.
- Dominant language
- PHP
- Stars
- 3.6k
- Forks
- 705
- Avg merge
- 1d 5h
- Merged PRs (30d)
- 134
Description
Description
JavaScript loaded as an ES module isn’t executed 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 when the script is loaded using legacy methods — which makes me think the script should be loaded and executed each time Live Preview updates.
Steps to reproduce
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:
<script type="module" src="app.js"></script>
Open Live Preview and the alerts fire. Make a change, page refreshes, content is updated — no alerts.
Include it as a regular script
<script src="app.js"></script>
Open Live Preview and the alerts fire. Make a change, page refreshes, content is updated — alerts fire again.
Additional info
I’m working around it by loading a legacy nomodule version of the script in Live Preview, but curious if JavaScript modules can be supported natively in Live Preview.
{#
# Load legacy JS in Live Preview because modules
# aren’t executed after the page reloads
/#}
{% if craft.app.request.isLivePreview %}
<script src="app.js"></script>
{% else %}
<script type="module" src="app.js"></script>
{% endif %}
- Craft version: 3.0.37
- PHP version: 7.1.20
- Database driver & version: MySQL 5.7.23
- Plugins & versions: N/A
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the issue in Live Preview with the provided app.js module and compare it with the regular script version. Trace the Live Preview refresh handling to determine why module scripts do not execute again; done means module scripts run after each content refresh, matching legacy scripts.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, php
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100