Issue with module imports without external dependencies

Questions
1

I’m working on project where I need to build it without relying on external dependencies or CDNs, I’m relying solely on locally stored files.
I’m having some challenges with my module imports.

I have this code

import * as THREE from './three.module.min.js';
import { GLTFLoader } from './GLTFLoader.js';

The first line works, but gives me this error:

SyntaxError: export declarations may only appear at top level of a module

The second line doesn’t work and is giving me this error:

TypeError: The specifier “three” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”.

I grabbed GLTFLoader.js from GitHub: three.j/examples/jsm/loaders/GLTFLoader.js

This is my index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>three.js test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta property="og:image" content="thumbnail.jpg" />
    <link type="text/css" rel="stylesheet" href="style.css" />
    <script src="three.module.min.js"></script#
    <script src="main.js" type="module"></script> 
  </head>
  <body>
  </body>
</html>
2

I only use local files for my collection.

See notes there below.

* discourse.threejs.hofk.de

2024-05-07 21.47.32

1 Like
3

In the installation guide the approach described under “Option 2: Import from a CDN” will also work with local files, the main thing (with both CDNs and local files) is that you need an Import Map to deal with the “three” was a bare specifier errors.

1 Like
4

Thanks for the useful answers!
I also found this example: https://github.com/teia-community/teia-templates/tree/main/html-three-template