R137 import jsm module with webpack build pipeline ERROR since r137

Questions
1

Hello after todays awesome r137 release, can not import the jsm or js module with webpack build pipeline ( works fine with r136)

example error is

ERROR in ./src/components-aframe/ik-gltf-readyplayerme-fullik.js 23:0-85
Module not found: Error: Can't resolve 'three/examples/jsm/controls/TransformControls.js' in '/home/arpu/Work/projects/vland_app/vland_app/src/components-aframe'
 @ ./src/SimpleIk.js 7:0-58
 @ ./src/root.js 14:28-48
 @ ./src/index.js 13:0-26 28:21-25

import { TransformControls } from "three/examples/jsm/controls/TransformControls.js";

anything i need to change on the webpack build pipeline?

2

oh looks like simple remove .js works?!

import { TransformControls } from "three/examples/jsm/controls/TransformControls";
3

An option is to use to the three-stdlib package as a stopgap measure until this all gets smoother in the main library:

import { TransformControls } from "three-stdlib"
4

I haven’t been following the recent discussion re import maps in three.js but hopefully the end game is something similar to this.

import { TransformControls } from "three/examples" maybe?

1 Like
5

@marcofugaro Any ideas why removing the .js extension fixes the issue for @arpu?

6

This is the same issue that is breaking skypack, should be fixed by #23347

You should be able to import same as before in the next patch release:

import { TransformControls } from "three/examples/jsm/controls/TransformControls.js";
3 Likes
7

Unfortunately it seems that while 0.137.1 fixes the issue in some cases, it doesn’t for others - right now we can’t get vite to resolve ‘three/examples/…’ into anything. Not sure how/where/if to add an importmap there, in index.html didn’t work.

8

i dont’t know much web stuff ,can anyone help me out ?
i use vs code live server and servez (which also worked with github pages)

and before i used to do

import * as THREE from '../build/three.module.js';
import { TTFLoader } from "../examples/jsm/loaders/TTFLoader.js"

and after updating to the 137 and 137 dev i’m getting

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

what can i do to solve this ? where do i add import maps ?
removing the extension does not work in my case

9

You usually add the import map into your index.html as a separate script tag like so:

<!-- Import maps polyfill -->
<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>

The actual imports change to:

import * as THREE from 'three';
import { TTFLoader } from "../examples/jsm/loaders/TTFLoader.js"
1 Like
10

working great on local host !

but github pages still gives the error

page: site

index html: portfolio/index.html at 415b4fc4cb3a7e33f19d1a318a4170bd6667f582 · optimus007/portfolio · GitHub
first js file: portfolio/start.js at 415b4fc4cb3a7e33f19d1a318a4170bd6667f582 · optimus007/portfolio · GitHub

11

Does this point to the actual location of the file on your page?

"three": "../build/three.module.js"

Presumably that would resolve to https://optimus007.github.io/build/three.module.js but that gives me a 404.

The actual file is here: https://optimus007.github.io/portfolio/build/three.module.js

So you probably need to change the ../ to ./

2 Likes
12

OH YES !.. faced this exact issue long back …local host does not have issues with extra " . "

site is up now site

13

Please clarify if the issue is related to vite or three.js. If you think vite is not the cause of your problem, please open an issue at the three.js GitHub repo.

14

I simply don’t know yet. Three has switched to this system but in contrast to before there’s absolutely no docs on how to get this to work in build systems, besides how to use import maps in plain HTML (not in a build system). That’s what I was pointing out here as many others seem to be taken by that change by surprise as well and I hope to learn how to resolve this.

I can only say that there’s not enough docs and that right now we can’t get package references to a local copy of R137 to work in build systems at all (which was working great before this change).

15

Not sure if this is related, but when using r137 along with three-stdlib and bundling typescript with webpack + ts-loader, I’m seeing a warning in the console that says “WARNING: Multiple instances of Three.js being imported.”

This looks like it might be ts-loader specific, so I opened an issue on that repo here: Multiple instances of Three.js being imported when building with ts-loader · Issue #1409 · TypeStrong/ts-loader · GitHub

git bisecting three alongside my minimal repro repo (linked in the above issue) points to this commit from PR23315 as the first time ts-loader has issues.

Don’t mean to derail this thread (it was the first result when I searched) so happy to make a new question if warranted.