I can't run my app with Vite. What should I do?

javascript

I just created a new app with npm and started to learn three.js . I don't know if I deleted something accidentally but the browser keeps giving an error. (VM80:6770 crbug/1173575, non-JS module files deprecated.)

import './style.css'

import * as THREE from 'three';
import { BoxGeometry } from 'three';

const scene = new THREE.Scene();


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

const renderer = new THREE.WebGLRenderer({
    canvas: document.querySelector('#bg'),
});

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(innerWidth/innerHeight);
camera.position.setZ(30);
renderer.render(scene, camera);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial( {color: red, wireframe: true} ) ;
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

animate();

HTML:

  <body>
      <canvas id="bg"></canvas>
      <div id="app"></div>
    <script type="module" src="/main.js"></script>
  </body>

edit: it somehow a bit fixed but chrome still gives errors.

updated screenshot

edit 2: I created new app again and when I render it, the page gave me this: screenshot2

I fixed it. In the last version, npm creates an automatic 'app' and I kept deleting it. I should include 'canvas' tag in there. That was all it

I can't run my app with Vite. What should I do?

Related

Recent Posts