Since the non-module version is sadly going to be deprecated, I have been looking into using the module version. I rarely use modules because they are not supported in what I do normally.
I’ve just spent hours trying to get the type definitions from DefinitelyTyped to work. And failed. It is a major headache.
It’s one file that just works when imported:
import * as THREE from "./three.module.js".
I wish the type definitions were like that, but they’re hundreds of files.
I have been able to successfully use the non-module version with typescript. It works by dropping the type definition files in the project, since the compiler will pretty much just see it and apply it globally.
But for the module version, in the end I was not able to convince the typescript compiler to use the type definition files:
Could not find a declaration file for module './three.module.js'
This is the import statement that I believe should work, given that I do not use an import map (even if I did, tsc wouldn’t know about it), and am just using “three.module.js” directly:
import * as THREE from "./three.module.js";
This is the folder structure that I believe should work:
/ tsconfig.json three.module.js my_script.ts (my_script.js) @types/ three/ index.d.ts package.json ... build/ three.d.cts three.d.ts three.module.d.ts src/ ... node_modules/ ... examples/ ...
"target": "es2020" "typeRoots": [ "./@types" ] "esModuleInterop": true "forceConsistentCasingInFileNames": true "strict": true "skipLibCheck": true
I’ve tried debugging it with
tsc --traceResolution, but that spits out over 7000 lines. I don’t see how a normal user can be expected to be analyzing all of that.
Among the last lines:
======== Resolving module '../../../src/Three' from '<REDACTED>/@types/three/examples/jsm/webxr/XRHandPrimitiveModel.d.ts'. ======== Resolution for module '../../../src/Three' was found in cache from location '<REDACTED>/@types/three/examples/jsm/webxr'. ======== Module name '../../../src/Three' was successfully resolved to '<REDACTED>/@types/three/src/Three.d.ts'. ========
It looks like it’s finding something at least, so I assume the
.d.ts files are in the right place.
I don’t really know where to look. What’s the file structure supposed to be? What’s a minimal working example?