Visual Studios Code "cannot read properties of null (reading 'width') "

Questions
1

I am brand new to JavaScript, just started today. Trying to pick up on the basics watching a YouTube video and I get this error that pops up when I try “JS Repl: Run”

Does anyone know how to fix this issue I am having reading ‘width’?

I have included a screen shot of the error and the files I currently have setup
(excluding | .gitignore | .vscode | package.json | package-lock.json | node_mdules(folder*) | OrbitControls.js | favicon.svg |).

At the end of this question I have another screen shot of multiple package.json’s and package-lock.json’s and wondering if I accidentally duplicated those and if I need to delete from one file location or the other.

style.css

canvas{

  position: fixed;

  top: 0;

  left: 0;

}

index.html

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <link rel="icon" type="image/svg+xml" href="favicon.svg" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Vite App</title>

  </head>

  <body>

    <canvas id="app"></canvas>

    <script type="module" src="/main.js"></script>

  </body>

</html>

main.js

import './style.css'

import * as THREE from 'three'

//import {OrbitControls} from 'three/examples/jsm/controls/OrbitContols'

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)

const renderer = new THREE.WebGL1Renderer({canvas: document.querySelector('#app')})

renderer.setPixelRatio(window.devicePixelRatio)

renderer.setSize(window.innerWidth, window.innerHeight)

camera.position.setZ(30)

renderer.render(scene, camera)

const geometry = new THREE.TorusGeometry(10, 3, 16, 100)

//const material = new THREE.MeshBasicMaterial({color: 0xFF6347, wireframe: true})

const material = new THREE.MeshStandardMaterial({color: 0xFF6347})

const torus = new THREE.Mesh(geometry, material)

scene.add(torus)

const pointLight = new THREE.PointLight(0xffffff)

pointLight.position.set(20, 20, 20)

const ambientLight = new THREE.AmbientLight(0xffffff)

scene.add(pointLight, ambientLight)

const lightHelper = new THREE.PointLightHelper(pointLight)

const gridHelper = new THREE.GridHelper(200, 50)

scene.add(lightHelper, gridHelper)

//const controls = new OrbitControls(camera, renderer.domElement)

function addStar(){

  const geometry = new THREE.SphereGeometry(0.25, 24, 24)

  const material = new THREE.MeshStandardMaterial({color: 0xffffff})

  const star = new THREE.Mesh(geometry, material)

  const [x, y, z] = Array(3).fill().map(() => THREE.MathUtils.randFloatSpread(100))

  star.position.set(x, y, z)

}

Array(200).fill().forEach(addStar)

const spaceTexture = new THREE.TextureLoader().load('./images/spaceImage.png')

scene.background = spaceTexture

function animate(){

  requestAnimationFrame(animate)

  torus.rotation.x += 0.01

  torus.rotation.y += 0.005

  torus.rotation.z += 0.01

  renderer.render(scene, camera)

  //controls.update()

}

animate()

error2
error21336×452 28.9 KB

multiple

2

this how I have my code in javascript and Typescript proyects

JAVASCRIPT

html

<canvas class="webgl"></canvas>

file.js

// Canvas
const canvas = document.querySelector('canvas.webgl');
/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

for typescript I put both. I dont know. Maybe it also work for you

  <div #canvas id="canvas"> </div>
3

unfortunately width still equals null. Can I set the width value somewhere before THREE.WebGLRenderer or maybe in .html or .css?

4

I see you are using THREE.WebGL1Renderer. Can you change it to THREE.WebGLRenderer and see if works?

5

@GhostRider could you push your code to GitHub?