examples/jsm files import change broke https://threejs.org hot-linking and code samples in the manual

Describe the bug

This has broken a lot of stuff but in my local repo, and some in the official examples.

Getting:

Uncaught typeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./". or "../"

I’m running chrome on windows.

Spent a lot of time wondering about this until I saw another user with the same problem… Now I’m seeing that the addition of the new polyfill by looking at the examples and perusing the threads:

<!-- 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": "../build/three.module.js"
		}
	}
</script>

Is this documented anywhere?

Also, can this shim at least pulled into the threejs repo until it’s stable/widespread? It seems problematic to have the library now require a quiet import from some random external CDN.

Looking here, seems to indicate it breaks every browser except chrome/opera ??

https://caniuse.com/import-maps

Can someone explain to me what value this change brings to the ecosystem to justify its adoption before its supported in all browsers?

From what I can tell, it basically takes a shotgun to the ecosystem of codepen/glitch/jsfiddle examples that already exist that rely on the existing behavior.

Is there a way to automatically pull in the shim on import of three.module.js for browsers without support, without requiring everyone to manually add the shim to their html?

I burned an evening trying to work around this, thinking that it was some new/updated chrome restriction.

Now I’m seeing other people having this issue.

import * as SkeletonUtils from 'https://threejs.org/examples/jsm/examples/SkeletonUtils.js';

Live example

The codepen examples on this manual page are broken: (https://threejs.org/manual/#en/load-obj)

• jsfiddle-latest-release
• jsfiddle-dev

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem (drag and drop the image).

Platform:

• Device: [Desktop, Mobile]
• OS: [Windows, MacOS, Linux, Android, iOS]
• Browser: [Chrome, Firefox, Safari, Edge]
• Three.js version: [dev, r???]

[Mugen87]

And, all the codes in manual importing modified modules are also broken.

We have already fixed that on dev and master. It’s just not yet published on github-pages.

https://github.com/mrdoob/three.js/blob/dev/manual/examples/load-obj-materials.html

[marcofugaro]

@fbellomi hello, you have to use the .js extension in node, now that three.js is an ES Module:

-import { Line2 } from "three/examples/jsm/lines/Line2";
+import { Line2 } from "three/examples/jsm/lines/Line2.js";

commented also here: https://github.com/mrdoob/three.js/pull/23245#issuecomment-1023648327