craftcms / craftcms/cms

JavaScript loaded as module isn’t executed after Live Preview refreshes

Open
#3,611 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug live preview :eye: severity:minor
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.