[Webstorm 2021.1] NPM module import not working (three.js)
I am trying to try out three.js. I installed it with NPM, added it to package.json, in a basic webstorm project. Using the following html, there are no errors but WebGLRenderer or anything else in three.js module, is "unresolved type". WS offers to import Typescript definitions but it can't find any. Clearly I am missing something important.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script type="module">
import * as THREE from "three";
function main()
{
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({canvas});
}
</script>
<canvas id="c"></canvas>
</body>
</html>
Please sign in to leave a comment.
Works fine for me, types are correctly resolved from node_modules/three/build/three.module.js:
Something you did is different, but I can't figure out what.
I reloaded webstorm and it worked. It's been running for a couple weeks, perhaps there is some kind of issue with that.
This doesn't work at runtime because the browser doesn't understand the module reference, which led down a long path of Webpack and babel and I don't want to do all that to try a simple demo. I tried to load three.js from a CDN but webstorm does not understand the urls. How can I both get Webstorm to code complete three.js and get it to work in a browser over http?
Try installing three.js typescript stubs by running
npm i @types/threein your project folder.