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.