[SOLVED] Importmaps broken on Firefox... which now supports Importmaps?

Questions
, ,
1

For future reference: Set up your importmaps ASAP in Firefox. It can break if you have too many other scripts that load first.

Howdy, I’m building a page that renders a simple Three.JS scene, and it works great in Edge, Chrome, and even Safari thanks to es-module-shims.

But not Firefox.

Until the middle of last December, Firefox didn’t support importmap. As of version 108, it does, and I’m running version 110. So Firefox should support importmap, but my page isn’t working.

My importmap is set up as follows:

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

<script type="importmap">
	{
		"imports": {
			"three": "./js/three.js-master/build/three.module.js",
			"three/addons/": "./js/three.js-master/examples/jsm/"
		}
	}
</script>

And my javascript does its importing as follows:

import * as THREE from 'three';

import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';

The error I get in Firefox is:
Uncaught TypeError: The specifier “three” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”.

At first it seemed like the shim was to blame, and I swear that one single time the page worked in Firefox when I commented out the shim. But since then, nothing. Firefox is just convinced it doesn’t support ImportMap (which it supports as of two version ago).

One wrinkle… it also worked at random one single other time, with no code changes from the previous refresh, and then stopped working again :upside_down_face:

Live demo: Loads on Chrome, iOS Safari, but not Firefox

Anyone encountered this, anyone found a workaround, or am I doing something wrong? I’ve been over all the documentation and examples I can find VERY thoroughly…

2

It works for me everytime I refresh in firefox.
The warning in the browser is just what firefox does anyway, even if the es-module-shims works.

image
image1195×596 125 KB

3

That’s really strange… I’ve seen comments that the error is harmless, but I ignored them because for me the page doesn’t work at all:

image
image1107×683 33.7 KB

It looks like your browser is eventually loading the polyfill, which mine isn’t. (Nevermind that neither of us should need the polyfill - you are on version 108 or greater right?)

I guess I have to look into what might make my browser ignore the polyfill?

Quick edit: Well if I turn off importmaps support in config, then Firefox loads the shim. I can’t ask users to change a setting for my little ol’ website, but it’s a start.

4

I was using 107 and it was fine. I don’t have any special settings, other than delete cache when I close the browser.

I just upgraded to 110 and your demo no longer works? I don’t yet know why. Console doesn’t give me any clues.

My most recent demo that uses importmaps does work in firefox 110 : Threejs Boilerplate - JSFiddle - Code Playground

1 Like
5

I tried, version 110.
First openning the page it loads…
Reloading the page not.
After some seconds reloads OK.

info1
info11356×594 127 KB

and again…
info2
info21359×463 65.2 KB

1 Like
6

Well with the help of your fiddle(which I briefly copied to my site to rule out some arcane server configuration mistake), I was able to solve it. Totally undocumented behavior and definitely a bug with Firefox, but basically it seems to not like having scripts that come in before the importmap. I moved my multiple CSS links, meta tags, etc. down underneath the shim/importmap and now it’s working fine.

It’s not a specific line that did it, since I could split the CSS files up before/after whichever way I wanted and still get the same behavior; looks like Firefox just has a timeout and turns the feature off once it’s waited too long.

Anyway, thanks everyone for taking a look and helping to work out what was happening. :v:

2 Likes
7

Well, you’re right, but that is expected behavior in all browsers.
You can’t assign mapping after you have imported a module.
So the randomness is probably caused by which file loads first.

I was a bit sad that threejs starting using import maps, as there is no need for it, and it breaks all installations when you try to upgrade to the newest version.
I just spent a day trying to debug a distributed application, running in 6 different environments.
iOS was the worst, generally because there’s no console panel to speak of.

Another “gotcha” are the libs for decompression. They still need their absolute path.
That cost me another hour wondering why some models worked and some didn’t.

At one point I thought it might have been more time efficient to re-write three to avoid the importmap altogether.

8

I used to feel the same, but I have changed my mind over time. Being able to globally remap where it’s pulling the lib and addons from, is really nice. And for instance if you have some 3rd party lib that is pulling three from somewhere you don’t like. but you’d prefer not to modify its source, you can remap it via an import map to make it pull from the right place. It’s a pretty useful mechanism.