TS2307: Cannot find module when using <script type="importmap">-CodePudding

I am experimenting with three.js and use typescript for the job.I do not want to wait for a bundler like webpack because it takes time and i have not figured out how to use the typescript debugger with it :-(.

Therefore i have set up a node.js/express.js webserver and use an importmap to load my modules from the local express webserver.

It works as expected ( i have a public repository on GitHub.

I am just doing basic things. I added the following stuff to my statical hosted express configuration:

import express from "express"
import path from "path"
import {fileURLToPath} from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const app = express()

// https://www.honeybadger.io/blog/import-maps/

app.use(express.static(path.join(__dirname, '/public')));
app.use('/build/', express.static(path.join(__dirname, 'node_modules/three/build')))
app.use('/jsm/', express.static(path.join(__dirname, 'node_modules/three/examples/jsm')))

app.listen(3000, () => console.log('Visit http://127.0.0.1:3000'))

The importmap just uses three.js

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

When i use "three" for import everything looks fine. But i have also to import some additional stuff:

import * as THREE from 'three';
import { OrbitControls } from '../jsm/controls/OrbitControls.js';
import Stats from '../jsm/libs/stats.module.js';
import { GUI } from '../jsm/libs/lil-gui.module.min.js';

For the last three import the typescript compiler gives my an error:

public/scripts/rootScene.ts:3:31 - error TS2307: Cannot find module '../jsm/controls/OrbitControls.js' or its corresponding type declarations.

3 import { OrbitControls } from '../jsm/controls/OrbitControls.js'
                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

public/scripts/rootScene.ts:4:19 - error TS2307: Cannot find module '../jsm/libs/stats.module.js' or its corresponding type declarations.

4 import Stats from '../jsm/libs/stats.module.js'
                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

public/scripts/rootScene.ts:5:21 - error TS2307: Cannot find module '../jsm/libs/lil-gui.module.min.js' or its corresponding type declarations.

5 import { GUI } from '../jsm/libs/lil-gui.module.min.js'

My question is :

How can i configure the folders with import-map to avoid any errors with the typescript compiler ? How do i have to configure my app? I think there also must be added some additional configuration in the tsconfig-file. But i have not found any examples.

Can someone help me and explain the usage of importmap with typescript?

CodePudding user response：

TS equivalent of import map is https://www.typescriptlang.org/tsconfig/paths.html

// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "~/*": [
        "src/*"
      ]
    }
  },
}