node.jsthree.jswebgl

Why does this "import WebGL"-statement not work in my Vite-Project?


The statement:

import { WebGL } from 'three/addons/capabilities/WebGL.js';

About my project setup:

  • I created the root folder using "npm create vite@latest"
  • ran "npm install" and then "npm install --save three"
  • ran "npm run dev" which is defined in package.json as "vite"
  • body of index.html has this line:
<script type="module" src="/main.js"></script>

  • Main.js includes the line from the top as well as code for a basic three.js scene, which I copied from Three.js's official documentation

  • When I run the server I get a blank white page.


The browser console shows this error:

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/three_addons_capabilities_WebGL__js.js?v=fc132b03' does not provide an export named 'WebGL' (at main.js:40:10)

Project tree:

.
├── counter.js
├── index.html
├── javascript.svg
├── main.js
├── node_modules
│   ├── @esbuild
│   ├── esbuild
│   ├── function-bind
│   ├── has
│   ├── is-core-module
│   ├── nanoid
│   ├── path-parse
│   ├── picocolors
│   ├── postcss
│   ├── resolve
│   ├── rollup
│   ├── source-map-js
│   ├── supports-preserve-symlinks-flag
│   ├── three
│   └── vite
├── package-lock.json
├── package.json
├── public
│   └── vite.svg
└── style.css



I'm confused because the statement is suggested in the official three.js docs. I know I could use an absolute path instead of the alias, but I'd like to understand why it's not working as-is. Just trying to learn.

Thanks in advance


Solution

  • I think it is exported as default. So you have to import it like this: import WebGL from 'three/addons/capabilities/WebGL.js';

    But I still have the issue that my IDE (Visual Code on Ubuntu) says: Cannot find module 'three/addons/capabilities/WebGL.js' or its corresponding type declarations. Probably while working with typescript, I would need another install for the types, but I am not sure.