unable to import `three` installed via `npm` in markdown file of `observable` project

Community Help
1

The following js code block in the example-report.md of the default example code of an observable project returns error, when three is already installed via npm install three for this project.

May I ask if I missed something important here?

Code:

import * as three from "three";

Error:

TypeError: Failed to resolve module specifier 'three'

2024-04-17 16 03 13
2024-04-17 16 03 133211Ɨ573 95.8 KB

The following also produce error:

Code:

 import * as three from "npm:three";

Error:

TypeError: Failed to fetch dynamically imported module: http://127.0.0.1:3000/_npm/three@0.163.0/_esm.js
2

The following code works for me:

```js echo
import * as THREE from "npm:three";
```

```js echo
const height = 300;
const camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10);
const scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
const material = new THREE.MeshNormalMaterial();
const mesh = new THREE.Mesh(geometry, material);
const renderer = new THREE.WebGLRenderer({antialias: true});
camera.position.z = 1;
scene.add(mesh);

const animation = (time) => {
  mesh.rotation.x = time / 2000;
  mesh.rotation.y = time / 1000;
  renderer.render(scene, camera);
};

renderer.setSize(width, height);
renderer.setAnimationLoop(animation);
display(renderer.domElement);
```

An alternative is to do npm install three (as you originally mentioned), and import from node_modules with import * as THREE from "three"; this also works for me under Framework ^1.6 (note that this is the version that was released yesterday, so maybe you just need to upgrade).

3

Thanks, @Fil

I figured out the source of the problem: The Great Firewall of China. (Iā€™m in China now. No need for more explanation, right?..), or as I suspect.

Once I switch to using roaming data of a non-China mobile number to bypass the Great Firewall and connect to internet, the issue is gone.

The import * as THREE from "npm:three" solution still works even if I switch back to using local internet connection in China within the Great Firewall.

2024-04-17 16 55 22
2024-04-17 16 55 221883Ɨ1373 109 KB

However, I still canā€™t get import * as THREE from "three" to work, with three@0.163.0 installed via npm, even if I use mobile roaming data for internet connection.

The message remains as TypeError: Failed to resolve module specifier 'three', which is strange because three.js is installed locally now.

4

I canā€™t fix China, sorry :-/

Are you running the latest version of Framework?

5

yes this is because the npm module is downloaded once, then served locally

6

@Fil, tell me about itā€¦ :wink:

I think I have the latest version of the Observable Framework:

npm list

hello-framework@ C:\Users\oat\Downloads\code\t_observable\hello-framework
+-- @observablehq/framework@1.5.1
+-- d3-dsv@3.0.1
+-- d3-time-format@4.1.0
+-- rimraf@5.0.5
`-- three@0.163.0
7

I see. But my question will be: How come import * as THREE from "three" is not working, if three has been downloaded successfully?

8

The latest version is 1.6; you need this release because thatā€™s when we introduced the node imports feature.

Importing from ā€œnpm:moduleā€ uses a completely different method (please see the documentation for all details).

9

Woops, my bad. Yes, after update the observable package, import * as THREE from "three" works now. Thanks.

1 Like