Cannot find module 'three/examples/jsm/loaders/RGBELoader' or its corresponding type declarations.

[umershaikh123]

• three version: 0.153.0
• @react-three/fiber version: 8.13.3
• @react-three/drei version: 9.74.15
• node version: v18.15.0
• npm version: 9.6.5
• @types/three: "^0.152.1"
• @vitejs/plugin-react: "^4.0.0",
• typescript: "^5.0.2",
• vite: "^4.3.9"
• react: "^18.2.0",

Problem description:

I am using typescript , react , vite and I cannot import any modules from three/examples... like any loaders

Relevant code:

npm installed

npm install three @types/three @react-three/fiber

import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
Error : Cannot find module 'three/examples/jsm/loaders/RGBELoader' or its corresponding type declarations.

or
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
gives the same error

package.json

{
  "name": "portfolio",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.11.16",
    "@mui/material": "^5.13.5",
    "@react-three/drei": "^9.74.15",
    "@react-three/fiber": "^8.13.3",
    "@types/react-vertical-timeline-component": "^3.3.3",
    "maath": "^0.6.0",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-awesome-slider": "^4.1.0",
    "react-dom": "^18.2.0",
    "react-slick": "^0.29.0",
    "react-vertical-timeline-component": "^3.6.0",
    "slick-carousel": "^1.8.1"
  },
  "devDependencies": {
    "@types/react": "^18.0.37",
    "@types/react-dom": "^18.0.11",
    "@types/react-slick": "^0.23.10",
    "@types/three": "^0.152.1",
    "@typescript-eslint/eslint-plugin": "^5.59.0",
    "@typescript-eslint/parser": "^5.59.0",
    "@vitejs/plugin-react": "^4.0.0",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.38.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "postcss": "^8.4.24",
    "tailwindcss": "^3.3.2",
    "three": "^0.153.0",
      "typescript": "^5.0.2",
      "vite": "^4.3.9"
  }
}

[nickyvanurk]

I fixed it by setting "moduleResolution": "Node" in my tsconfig.json, it was set to "Bundler" before.

[DoLoop216]

Just trying to implement it into my Next.js project and found something really stupid which may also help someone.

Add .js at the end. This worked for me.

// Not working
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

// Working
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'

[Reine0017]

Just trying to implement it into my Next.js project and found something really stupid which may also help someone.

Add .js at the end. This worked for me.

// Not working
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

// Working
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'

Worked for me thanks @DoLoop216! Read a teeny bit more into this following your answer - think it's because of the module bundler (Vite in my case). Think it's this issue https://stackoverflow.com/questions/75268328/vite-doesnt-resolve-extension-for-build. Don't think it's an issue with the drei codebase.

[Sceat]

Just trying to implement it into my Next.js project and found something really stupid which may also help someone.

Add .js at the end. This worked for me.

// Not working
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

// Working
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'

This is the solution if you want to work with moduleResolution: "nodenext"

[zerone0x]

Just trying to implement it into my Next.js project and found something really stupid which may also help someone. Add .js at the end. This worked for me.

// Not working
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

// Working
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'

This is the solution if you want to work with moduleResolution: "nodenext"

Thanks, you saved me! haha

[ilyaEpic]

What if I want to work with moduleResolution: "Node16"? Our project requires it. This seems like some bug in types import. When using .js import, I can go to type definition without problem, so the types are there. But I get a TS error: The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. If I remove the js extension, then I get the original Cannot find module error which, as I wrote, I cannot fix my changing the moduleResolution config.