What is the best way to utilize ThreeJS ES6 native modules alongside Typescript?

Question

What is the best way to utilize ThreeJS ES6 native modules alongside Typescript?

I have been experimenting with using ThreeJS ES6 native modules directly in the browser. It's quite exciting to be able to import ThreeJS right into my javascript files without needing a module bundler.

In javascript, it works like this:

import * as THREE from './lib/three.module.js'
import { OrbitControls } from './lib/OrbitControls.js'

Now, I am attempting to achieve the same thing in Typescript. I installed the typescript definitions using

npm install --save @types/three

However, even after that, VS Code is still unable to locate the type declaration files:

⚠️ Could not find a declaration file for module '../lib/three.module.js'

⚠️  Could not find a declaration file for module '../lib/OrbitControls.js'.

After following suggestions from comments, I modified the imports to:

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

Although the declarations can now be found, Typescript is still having trouble locating the modules!

⚠️  An accessor cannot be declared in an ambient context and Failed to resolve module specifier "three".

⚠️  Relative references must start with either "/", "./", or "../".

I am left wondering how I can effectively use ES6 native modules from ThreeJs in my Typescript project without resorting to a module bundler?

typescript three.js es6-modules

Answer 1

Answer №1

Consider arranging your imports in the following manner:

import * as React from 'react'
import { useState } from 'react';

Answer 2

Consider arranging your imports in the following manner:

import * as React from 'react'
import { useState } from 'react';

Answer 3

Answer №2

To ensure TypeScript recognizes the shape of a library module, you'll need to create a .d.ts file with matching name, such as ./lib/three.module.d.ts. When you use

import * as Three from "./lib/three.module.js"

, TypeScript automatically searches for a corresponding typings file using its module resolution strategy. In this declaration file, you can simply define and export types that accurately reflect the structure of the module. For your situation, a simple solution could be:

import * as Three from "three";
export = Three;

Answer 4

To ensure TypeScript recognizes the shape of a library module, you'll need to create a .d.ts file with matching name, such as ./lib/three.module.d.ts. When you use

import * as Three from "./lib/three.module.js"

, TypeScript automatically searches for a corresponding typings file using its module resolution strategy. In this declaration file, you can simply define and export types that accurately reflect the structure of the module. For your situation, a simple solution could be:

import * as Three from "three";
export = Three;

Answer 5

Answer №3

Jamesernator shared an alternative solution in the TypeScript Github Issues. Simply include this code snippet in your HTML:

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

This will allow the browser to handle the remapping process automatically. Pretty neat!

Check out more details here.

Answer 6

Jamesernator shared an alternative solution in the TypeScript Github Issues. Simply include this code snippet in your HTML:

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

This will allow the browser to handle the remapping process automatically. Pretty neat!

Check out more details here.

Answer 7

Answer №4

It appears that using an alias for declaration files is necessary, as aliases are not compatible with es6 native import statements. Unfortunately, this issue is not mentioned in the documentation: https://www.typescriptlang.org/docs/handbook/declaration-files/consumption.html

Some individuals address this problem by implementing a comprehensive build pipeline solution, but I opted for a less complex approach: Typescript declaration file created with alias instead of relative path

Instead, I utilized tsc-watch and crafted a simple bash script: https://www.npmjs.com/package/tsc-watch

$ tsc-watch --onSuccess "./mysed"

$ cat ./mysed
#!/bin/bash

# use *js to capture .mts as well as .js
sed -i "" "s/import \* as THREE from 'three';/import \* as THREE from '.\/lib\/three\.module\.js';/" js/*js;

This script replaces import * as THREE from 'three'; in my .ts with

import * as THREE from './lib/three.module.js'

in my JS code, enabling me to utilize the typed version during development and the non-typed version in production. Phew!

Answer 8

It appears that using an alias for declaration files is necessary, as aliases are not compatible with es6 native import statements. Unfortunately, this issue is not mentioned in the documentation: https://www.typescriptlang.org/docs/handbook/declaration-files/consumption.html

Some individuals address this problem by implementing a comprehensive build pipeline solution, but I opted for a less complex approach: Typescript declaration file created with alias instead of relative path

Instead, I utilized tsc-watch and crafted a simple bash script: https://www.npmjs.com/package/tsc-watch

$ tsc-watch --onSuccess "./mysed"

$ cat ./mysed
#!/bin/bash

# use *js to capture .mts as well as .js
sed -i "" "s/import \* as THREE from 'three';/import \* as THREE from '.\/lib\/three\.module\.js';/" js/*js;

This script replaces import * as THREE from 'three'; in my .ts with

import * as THREE from './lib/three.module.js'

in my JS code, enabling me to utilize the typed version during development and the non-typed version in production. Phew!

What is the best way to utilize ThreeJS ES6 native modules alongside Typescript?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Troubleshooting the inclusion of nodemon in package.json

Enhance React components in Deck.GL by including default properties for each child component

Is it possible that using npm link could be the root cause of the "module not

Unlock the Power of Angular: Leveraging ViewEncapsulation.Native to Access HTML Elements

Enhancing TypeScript builtin objects in Netbeans using a custom plugin

Is there a way to reset static data in a TypeScript subclass? (or alternative method for managing global data)

Navigating an array and organizing items based on matching properties

Utilizing Vue 3's Inject Plugin alongside the powerful Composition API and TypeScript

Leverage the power of data binding in Typescript Ionic by exposing object functions

What causes objects to intersect in A-Frame even when they are seemingly distanced from each other?

Update the router URL without switching pages, yet still record it in the browser history

I encountered an issue where TypeScript's generics function was unable to locate a property within an interface

Customizable parameters in a React component

Welcome to the awe-inspiring universe of Typescript, where the harmonious combination of

Using Angular with Google Maps: Learn how to retrieve a list of markers from a map and implement onClick events for each one

Learn how to use Angular2 or TypeScript to display 'unsubscribe' and 'subscribe' text on a toggle button

Experiencing an issue with mui/material grid causing errors

Updating the geometry of an object while the camera is in motion can result in visual errors in the three.js library

Is it possible to obtain the URL (including parameters) of the first navigation before proceeding with the navigation process?

Can you explain the distinction between 'rxjs/operators' and 'rxjs/internal/operators'?