"Failed to load module script" error on webOS 5+ LG TVs

Web App Development
1

I am experiencing an issue with my web app on a webOS 5+ LG TV. When I try to load a module script using the <script type="module"> tag, I receive a “Failed to load module script” error in the browser console. The error message reads:

image
image995×141 15.4 KB

I have tried setting the MIME type explicitly for the module script by adding the type="text/javascript" attribute to the <script> tag, but this did not resolve the issue.

The web application is working perfectly on webOS 4.x model of LG TV.

I am using Svelte framework, Vite as my build tool, and I have also tried using the Vite polyfill plugin to add support for older browsers, but this did not resolve the issue either.

I believe this issue may be related to the way LG TVs with webOS 5+ handles module scripts or the way the TV’s browser handles MIME types, but I am not sure.

Steps to reproduce:

  1. Load a web app on a webOS 5 LG TV.
  2. Attempt to load a module script using the <script type="module"> tag.
  3. Observe the “Failed to load module script” error in the browser console.

Minimal reproduction app: com.domain.voxe_0.0.1_all.ipk - Google Drive

Expected result:

The module script should load correctly and execute without errors.

Actual result:

The “Failed to load module script” error is displayed in the browser console.

Additional information:
Issue is appearing on the following devices:

2022 LG TV info:

  • LG TV model: 43UQ75006LF
  • WebOS version (SDK version): 7.2.0
  • Firmware version: 03.20.26
  • Browser version: Chromium 87
  • Build tool: Vite 4.0.0

2020 LG TV info:

  • LG TV model: 55UN73506LB
  • WebOS version (SDK version): 5.4.2
  • Firmware version: 04.40.70
  • Browser version: Chromium 68
  • Build tool: Vite 4.0.0

Any help or guidance on resolving this issue would be greatly appreciated.

Thank you.

2

@narae0.kim Can you please help with this?

3

To use the script type=“module”, you must serve the html file through a server as follows due to JavaScript module security requirements:
window.location="your-remote-server-url/index.html"
For more information, please refer to the guide here. Thank you.

4

I encountered the same problems as you. The solution was first using the vite polyfill and plugin-legacy plugin, and then going into the index.html (in dist folder). Once in the index.html, remove the script import for the one with “type=module”, and then go to the script imports which imports the polyfill and legacy scripts and remove the nomodule tag. This means it’s forced to import the legacy js and it should work. Kind of stupid, but I guess that encapsulates LG TV-app development in general.

5

@mili95 Yes, you’re right. I later was able to figure out it. I actually wrote Vite plugin to automate it.

const legacyScriptsPlugin = () => {
  return {
    name: "html-transform",
    apply: "build",
    transformIndexHtml: {
      order: "post",
      sequential: true,
      handler(html: string) {
        console.log("Removing module scripts to always fallback legacy build");

        return html
          .replace(
            /<script type="module"(.*?)<\/script>/g,
            "<!--  removed module -->"
          )
          .replace(
            /<link rel="modulepreload"(.*?)>/g,
            "<!--  removed modulepreload -->"
          )
          .replace(/<script nomodule/g, "<script");
      },
    },
  };
};
1 Like
6

Nice, I’ll probably end up using that plugin for convenience myself :slight_smile: