Change of import in r137 - unusable examples

Questions
1

Change in OrbitControls

r136


import {
	EventDispatcher,
	...
	Vector3
} from '../../../build/three.module.js';

r 137

import {
	EventDispatcher,
	 ...
	Vector3
} from 'three';

leads to an error accessing three.js:

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

For my collection, I always change the access and store on my server, but for my beginner example, I use the original path so that I can immediately detect errors when version change. And then I can make adjustments.
Most recently, this was the path to Text Geometry, which had changed.

Extended examples of my collection are only links, a number no longer work.

2

You have to add an import map to your HTML files now. In the examples, it looks like so:

Introducing from 'three'; was an important change to unify the import syntax in the web and node. However, it means you have to add an import map to your index HTML to resolve the bare import specifier three into an absolute or relative path.

3

Apparently, however, not all browsers support this in the default setting?
Crome, Opera, Edge work,

Firefox does not.
96.0.3 (64-Bit)
Firefox Release
January 27, 2022

try BeginnerExample

4

You have to add a polyfill in this case. It is included in all official examples.

5

Thank you for the information.

It now works with Firefox, the console still shows the error message. No wonder when beginners despair. For a simple example you need some “extras” right away.

I “love” the browser chaos. :frowning_face:

2 Likes
6

Sorry, we have to move forward and can’t wait until the last browser implements important web standards. Import maps are required for a “complete” ES6 module support.

I would love to see when developers finally file their complaints directly at Mozilla or Apple and not at individual software projects :wink:.

3 Likes
7

I love it when people do something and expect someone else to take the blame :joy:

1 Like
8

the situation is so weird, on one hand i feel like the fixation on “web standards” is unnatural and libraries should not try to force it, because specs will only become standards when we use them as such, and hundreds were later cast out because they didn’t have merit. if import maps will ever be used has not been decided yet. but then again, at least we’re finally not breaking npm, which is the one standard that drives javascript as a whole. so im kind of ok with shifting blame. :hugs:

9

Discussing won’t help here, I just picked out the broken extended examples from 2021 eXtended eXamples. They are valuable examples and it would be a pity to lose them.

If you find time, feel free to update them. If I find time, I will search the previous years.

https://jsfiddle.net/Chrisssie/6qymkftg/ @vielzutun.ch

https://codepen.io/Vin-ni/pen/gOWxEqM?editors=1111 @UI_UNICORN

Edit fiddle - JSFiddle - Code Playground @seanin @gorskidev

Edit fiddle - JSFiddle - Code Playground @seanin @Mugen87

https://codepen.io/ogames/pen/rNmYpdo?editors=1111 @espace3d

Edit fiddle - JSFiddle - Code Playground @Yongs @Mugen87

Edit fiddle - JSFiddle - Code Playground @Tim @prisoner849

https://jsfiddle.net/prisoner849/rwv0kex9/ @prisoner849

Edit fiddle - JSFiddle - Code Playground @Natch

10

Updated mine to r136.

1 Like
11

Me too with r127.

1 Like
12

Use 127< versions for examples.

import { OrbitControls } from "https://unpkg.com/three@0.127.0/examples/jsm/controls/OrbitControls.js";