useScriptTag won't run script type: module second time

[IlyaSemenov]

Describe the bug

Using useScriptTag with <script type="module"> doesn't work. The script will only execute (run its side effects) on first load, but it won't re-execute the second time.

This is perhaps not a bug in the technical sense but rather lack of specific workarounds (e.g. adding ?v=<random> to the URL fixes the problem, albeit being very suboptimal), but from user's point of view it's simply not working.

Reproduction

https://stackblitz.com/edit/nuxt-starter-cbmqng

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.3 - /usr/local/bin/pnpm
  npmPackages:
    @vueuse/core: ^10.9.0 => 10.9.0 
    vue: ^3.4.21 => 3.4.21

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[huiliangShen]

maybe you can see this case:

import { useScriptTag } from '@vueuse/core'

const { scriptTag, load, unload } = useScriptTag(
  'https://player.twitch.tv/js/embed/v1.js',
  () => {
    // do something
  },
  { manual: true },
)

// manual controls
await load()
await unload()

use unload function to remove script tag.

[IlyaSemenov]

I'm not following. The problem is that script with type=module loads twice, but doesn't execute twice. How's your example related to it? For starters, the twitch player is not a module script but a legacy CJS script.

[OrbisK]

@IlyaSemenov do you have a minimal reproduction of this issue?

[IlyaSemenov]

@OrbisK I provided the minimal reproduction with the issue under Reproduction chapter, did you check it? https://stackblitz.com/edit/nuxt-starter-cbmqng

It includes the steps to reproduce the problem:

[OrbisK]

I provided the minimal reproduction with the issue under Reproduction chapter, did you check it?

You are right. I think I missed that one. Sorry.

[OrbisK]

@IlyaSemenov I have tried a few things. But I am pretty sure this is not a vueuse problem. It looks like the browser is caching some things. I have a workaround for you, if you add a random query param to the url it does not cache it. Like https://www.unpkg.com/@wormhole-foundation/wormhole-connect/dist/main.js?query=${new Date().getTime()}. This is not ideal. but also not a problem with useScriptTag

[IlyaSemenov]

I appreciate your help, but this workaround was listed in the beginning of the issue description:

adding ?v=<random> to the URL fixes the problem, albeit being very suboptimal

If useScriptTag silently not fully supporting module scripts is not deemed to be any kind of problem, then I guess just close the issue. In my thinking however, it should be at least documented that useScriptTag won't work reliably with module scripts.

[OrbisK]

but this workaround was listed in the beginning of the issue description:

Sorry. Worked on 10 topics at once yesterday 😅

I did some research. Looks like this is expected behaviour https://stackoverflow.com/a/64363954/17603999. The composable works as expected.

I think what you want is:

1. your www.unpkg.com/@wormhole-foundation/wormhole-connect script should add functions to the window.wormholeConnect.
2. call your `window.wormholeConnect' functions when loading or when you need to re-execute.

This is also how most of the [Nuxt Scripts] (https://scripts.nuxt.com/) work.

Hope it helps.

I will convert this into a discussion.