Loading texture with rollup always gives an error

Below is my code. I’ve just used one of Mugen’s example files to try and get my head around loading in custom textures and models but I constantly get an error. Here is my App.js:

import {
	BoxBufferGeometry,
	Mesh,
	MeshBasicMaterial,
	PerspectiveCamera,
	Scene,
	WebGLRenderer,
	TextureLoader
} from 'three';

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

let camera, scene, renderer;

class App {

	init() {

		camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
		camera.position.z = -3;

		scene = new Scene();

		const geometry = new BoxBufferGeometry( 1, 1, 1 );

		let cube

		const loader = new TextureLoader();

		loader.load('./assets/wall.jpg', (texture) => {
				const material = new MeshBasicMaterial({
					map: texture,
					// color: '#80ded0'
				});

				console.log(material)
				cube = new Mesh(geometry, material);
				scene.add(cube);

				animate();
			},

			// onProgress callback currently not supported
			undefined,
		
			// onError callback
			function ( err ) {
				console.error( err );
			}
		);

		renderer = new WebGLRenderer( { antialias: true } );
		renderer.setPixelRatio( window.devicePixelRatio );
		renderer.setSize( window.innerWidth, window.innerHeight );
		document.body.appendChild( renderer.domElement );

		window.addEventListener( 'resize', onWindowResize, false );

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

	}

}

function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

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

}

function animate() {

	requestAnimationFrame( animate );
	renderer.render( scene, camera );

}

export default App;

Any help s greatly appreciated!

EDIT:

I’m also using rollup to bundle it and serve to then serve the html. The bundle.js is deferred