如何将@types/three 用于带有 webpack 的 ts？

Question

I have a NodeJS project I want to compile using webpack for a client side web app, for browsers.

I have installed webpack, and ts-loader. I was able to compile my project, but I am getting errors in my ts file that the class types of THREEjs are not recognized. I have the @types/three package installed but I can't figure how to make ts-loader use that.

Here are my config files: package.json

{
    "name": "Lib",
    "version": "1.0.0",
    "description": "",
    "main": "distribute/Lib.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "parcel src/index.html --port 5000"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@types/three": "^0.103.2",
        "browserify": "^17.0.0",
        "javascript-obfuscator": "^2.10.4",
        "parcel": "^2.0.0-nightly.610",
        "parcel-plugin-static-files-copy": "^2.5.1",
        "ts-loader": "^8.0.17",
        "typescript": "^3.9.9",
        "webpack": "^5.24.2",
        "webpack-cli": "^4.5.0"
    },
    "dependencies": {
        "@types/node": "^14.14.31",
        "express": "^4.17.1",
        "node-fetch": "^3.0.0-beta.9",
        "save": "^2.4.0",
        "three": "^0.118.3",
        "three-orbitcontrols": "^2.110.3"
    }
}

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/Lib.js',
    module: {
        rules: [
        {
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/,
        },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
};

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "noImplicitAny": true,
        "module": "es6",
        "target": "es5",
        "jsx": "react",
        "types": [
        "three"
        ],
        "allowJs": true
    }
}

This is an example of the THREE.js types error I get

TS2694: Namespace '"I:\NodeJs\Project\node_modules\three\build\three"' has no exported member 'DataTexture'.

Answer 1

Ok, what I did is: npm uninstall '@types/three' Then: npm install '@types/three'

Basically uninstalling the types then installing them again did the trick. Now I don't care THREE.js types related errors.