5.0 Issue in Firefox on Windows, Tiny MCE not loaded.

[coolcat-creations]

Steps to reproduce the issue

I found these errors in a customers console when giving support:

Says:
) Uncaught TypeError: Error when resolving the module specifier "editor-api". Relative module specifiers must begin with "./", "../* or "/".
) Uncaught TypeError: Error resolving the module specifier "joomla.dialog". Relative module specifiers must start with "./", "../" or "/".

• Uncaught TypeError: Error resolving the module specifier "editor-api", Relative module specifiers must start with "./", "../" or "/".
  ) Uncaught TypeError: Error when resolving the module specifier "editor-api". Relative module specifiers must start with "./", "../" or "/".
  ) Uncaught TypeError: Error when resolving the module specifier "editor-api", relative module specifiers must start with "./", "../" or "/".
  ) Uncaught TypeError: Error resolving the module specifier "joomla.dialog". Relative module specifiers must start with "./", "../" or "/*.
• Uncaught TypeError: Error resolving the module specifier "joomla.dialog", relative module specifiers must start with " ../" or "/".
• The Components object should no longer be used. It will be removed soon.

Expected result

Tiny MCE should load

Actual result

Does not load in that browser (Firefox, Windows)

System information (as much as possible)

Joomla 5.0.0

[dgrammatiko]

Only browsers that support import maps are supported, ie: https://caniuse.com/import-maps
If you need to support browsers without import maps support in the template you can load this polyfill: https://www.npmjs.com/package/es-module-shims#es-module-shims

[coolcat-creations]

But its the core tiny MCE ? What do I need to do?

[dgrammatiko]

Add this:

<script async src="https://ga.jspm.io/npm:es-module-shims@1.8.1/dist/es-module-shims.js"></script>

before <jdoc:include type="scripts" />

joomla-cms/templates/cassiopeia/index.php

Line 132 in c9b3181

<jdoc:include type="scripts" />

in the head of your template to check if this is your problem. BTW what's the version of FF?

[coolcat-creations]

But why in Cassiopeia, it's in Atum in the backend?
I am sorry I dont know the customers version number I clicked in the meeting on check for updates and it said that everything is up to date. But I dont know the exact version number on their windows.

[dgrammatiko]

But why in Cassiopeia, it's in Atum in the backend?

Sorry, I thought it was a front end template by the screenshot, try the same as above in the Atum:

joomla-cms/administrator/templates/atum/index.php

Line 106 in c9b3181

<jdoc:include type="scripts" />

it said that everything is up to date

Well, the error is that the relative module specifier should start with . but obviously it starts with a letter, because there's an import map that should resolve the path. I'm getting to technical here, but the point is that their FF is not up to date, actually it's more than 1 1/2 yrs old.

If you care to understand the problem I've explained how this tech is working here: #41034

The thing that is not very clear though is which browsers J5 actually supports ootb. Anyways could you please verify that things work normally with the polyfill?

[Fedik]

What Dimitris said: Update your Firefox to latest version.
If it not an option then use $wa->useScript('es-module-shims'); to enable polyfill.

Do NOT do this #42291 (comment) 😄

I am closing here.

For reference:

• [5.0] ESM importmap support #40714

[coolcat-creations]

Because I was confused, I will add more context here for people that don't understand what's going on (like me) and end up here :-)
Apparently something in Joomla 5 was changed so that Browser versions that are older as 2023 (also Longtime Support and Extended Support Versions) will have issues displaying the tiny MCE Editor. To fix this the Admin Template needs to load the Polyfill script. But the better solution is to ask the organisation administrator to update the browser.
Hope this summary was correct.

[Fedik]

One more note.

To fix this the Admin Template needs to load the Polyfill script

This also can be done via plugin, onBeforeCompileHead event.