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

[jonybekov]

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:

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.

[jonybekov]

@narae0.kim Can you please help with this?

[narae0.kim]

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.

[mili95]

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.

[jonybekov]

@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");
      },
    },
  };
};

[mili95]

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

[isaacjon]

hi bro, can i have your contacts. i wanna ask about choosing a framework for webos app development

[Burslf]

where exactly should i put the window.location="" ? My react app that uses vite build also doesn’t work and when i remove the module from the it just got worse … So i would like to know what are my options

[Burslf]

This code remove the entierly and so the app doesn’t load any js… did this really work for you ?

[Burslf]

Have you found a workaround ? I am also building using Vite in my React app and i cannot run it in an emulator / TV. It does work on the simulator though when i run the ./dist directory directly, but when i try the .ipk build it just struggle with the Failed to load module script: The server responded with a non-JavaScript MIME type of "". …

[jonybekov]

If you target older browsers when building your Vite project, it will generate two type of scripts. Module scripts and legacy scripts. By default, browsers try to load module scripts so that’s the reason app throws “Failed to load module script”. To fix this issue, just try to comment module scripts from your dist/index.html and test it. It worked on me on Vite & Svelte project. I’m not sure about React, but config should be similar. I just automated that process by writing Vite plugin.

[jonybekov]

I think that you’re shipping module scripts in your .ipk build and in emulator it’s probably older version of chromium that doesn’t support module scripts. So make sure that you’re shipping legacy scripts

[jonybekov]

jonibekov99@gmail.com

[narae0.kim]

To use the <script type="module">, you must serve the html file through a server due to JavaScript module security requirements. Please try again with a hosted web app. Thank you.

[Burslf]

Thank you, i tried to ship it via a hosted web app, but the emulator doesn’t have network connection so i cannot make a test. And i don’t have a LG TV at home to make sure everything work correctly…

[Burslf]

Thank you, will contact you

[Burslf]

I tried with a hosted app, but unfortunately it still doesn’t seem to accept a <script type="module">. When i inspect with the debugger i see that the .css files have loaded correctly but no sign of .js files being loaded…
I am desperate since i finished building the whole app and now i am testing on a LG physical device the app doesn’t run…
I tried to build with legacy scripts but some of my code (such as import.meta.env) doesn’t work and some syntax throw errors (Unexpected token "?" and more)

[jonybekov]

“Unexpected token ?..” comes from optional chaining. Make sure you’re building your project with proper polyfills and use older EcmaScript version for build target.

[magicpatel]

hello brother, is this worked for you ?

[jonybekov]

For anyone who facing this issue:
If you are using Vite legacy plugin, there’s an option called renderModernChunks which basically disables rendering modern scripts and you’ll end up having only legacy scripts in your index.html and dist folder.

That way, you don’t need to manually remove module scripts from index.html.

Here’s my vite config: