Three.js import map not working in Firefox

Questions
1

Firefox brings this error message:

Uncaught TypeError: Error resolving module specifier “three”. Relative module specifiers must start with “./”, “../” or “/”.

The line it refers to is

import { ... } from /*'three'*/'blob:https://[URL]/c945bbba-09f5-454f-b2a4-508d3d70f89a';

which is the Firefox translation of

import { ... } from 'three';

referring to the import map in the index.html file:

	<!-- Import maps polyfill -->
	<!-- Remove this when import maps will be widely supported -->
	<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

	<script type="importmap">
		{
			"imports": {
				"three": "./vendor/three/build/three.module.js"
			}
		}
	</script>

which works perfectly fine in Google Chrome browser. Any ideas?

2

Although a polyfill is used, Firefox still reports a console error. You can safely ignore it. The import should still work like in the official examples.

3

Yes, it should. But it doesn’t. All I get is a black screen.

4

Can you please demonstrate with a live example what you are doing?

5

Btw, there was another error further down which I had forgotten to mention:

Uncaught TypeError: undefined has no properties
    createEarth https://badde.media/threejs/fungi/src/World/components/earth.js:400
    World https://badde.media/threejs/fungi/src/World/World.js:85
    main https://badde.media/threejs/fungi/src/main.js:8
    <anonymous> https://badde.media/threejs/fungi/src/main.js:14
684c1648-98f6-4387-9103-af44d1797d70:400:2
    createEarth https://badde.media/threejs/fungi/src/World/components/earth.js:400
    World https://badde.media/threejs/fungi/src/World/World.js:85
    main https://badde.media/threejs/fungi/src/main.js:8
    <anonymous> https://badde.media/threejs/fungi/src/main.js:14
    InnerModuleEvaluation self-hosted:2393
    evaluation self-hosted:2354
6

Sure, take a look here using Chrome:

https://badde.media/threejs/fungi/index.html

7

This error refers to the line

	scene.add(ground);

which adds the ground object with the grass shader to the scene.

8

I have tested the online version in Chrome, Chrome Canary, Chrome Mobile Android, Opera, Opera Mobile Android, Edge, and it worked. I’ve tested it in Firefox, Firefox Mobile Android, Chrome Mobile iOS, Safari Mobile, and it didn’t work - although other projects of mine did, like this one:
https://badde.media/threejs/shapes/index.html
I’ll take a closer look at my code, but I honestly don’t think that it’s my mistake, because if it were, it wouldn’t run in any browser. Since it’s repeatable it has to be a bug of some kind, I jst don’t exactly know where yet.

9

I’ve just realized that another project of mine, https://badde.media/threejs/3dvis_FE/index.html, which has the same code base, also doesn’t work in Firefox anymore, although it does in Chrome, and although I didn’t change any of its code since weeks. It even throws the same error. So, yup, that seems to be a Firefox bug. I just don’t understand why all the other browsers I have tested also didn’t work.

10

If you think so, please report it here: https://bugzilla.mozilla.org/

1 Like
11

It could also be a bug in the es-module-shims.js import mapping, since several different browsers had problems. No?

12

Probably, yes.

13

Can you tell me where to file a bug report for this module?

14
15

Just in case anyone wants to follow up or contribute:

16

I tried to follow up through the different github pages but really didn’t get it…
It’s related to Polyfill, and some cycles stuff(?). Is there a solution to it or workaround available?

17

I am also having this error with Firefox 110. I tryied using a polyfill, and now it sometimes works, possibly when the polyfill script loads fast enough before the script.js runs, other times it throws the same error as you and stops at line 1.

My script can be found at https://jackgreenearth.org/projects/alien-game/

1 Like