I get a Type Error when I use document.body.appendChild(renderer.domElement)

Discussion
,
1

So first I created the renderer with the WebGLRenderer() constructor and I try to add the renderer to the body tag in the DOM with document.body.appendChild(renderer.domElement); and I get this error and I don’t know what to do:

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at ebWYT.three (index.js:15:15)
    at newRequire (index.739bf03c.js:71:24)
    at index.739bf03c.js:122:5
    at index.739bf03c.js:145:3
ebWYT.three @ index.js:15
newRequire @ index.739bf03c.js:71
(anonymous) @ index.739bf03c.js:122
(anonymous) @ index.739bf03c.js:145

I am using parcel as well and I deleted the .parcel-cache and dist folders and ran npx parcel ./src/index.html to bundle the app again and I am still getting this error. Please someone tell me what I am doing wrong. Here is my code:

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Three.js Solar System</title>
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <script src="./js/index.js" type="module"></script>
</body>
</html>

index.js:

import * as THREE from 'three';

// initialize renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domELement);

index.css

body {
  margin: 0;
}

Nevermind. It’s the ‘L’ in ‘domElement’. I have been stuck on this for an embarassing amount of time.

1 Like