Multiple instances of Three.js being imported with webpack

Hello,
I try to load a 3D GLF model with TREE but nothing is displayed and I have the error : Multiple instances of Three.js being imported. I use webpack.

My code in index.html : <body> <script src="bundle.js"></script> </body>

My import in the js file : import * as THREE from 'three'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

I think the error coming from the webpack’s configuration but when I search this error I find a lot of forums but no problem is similar to mine or I missed it.

Thank you in advance for your feedback.

I think you’ll have to share enough details for someone to reproduce the problem exactly, e.g. your webpack config. This issue doesn’t occur for me with Webpack. Also, what version of three.js?

Thank for your answer
I’ve done the webpack’s tutorial again and I no longer have the error :expressionless: sorry

But I have new problem : when I run my script, no error is displayed in the console but I just have a black background in my canvas. When I check the networks part in my inspector ( I dont know if it’s the correct word in English ) all resources are well loaded.

I use the 0.141.0 version of three

My js code :

import * as THREE from 'three';

	import { GLTFLoader } from './node_modules/three/examples/jsm/loaders/GLTFLoader.js';
	
	function main() {
		const canvas = document.querySelector('#C');
		const renderer = new THREE.WebGLRenderer({canvas});

		const fov = 75;
		const aspect = 10;
		const near = 0.1;
		const far = 5;

		const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

		camera.position.z = 10;

		const scene = new THREE.Scene();

		const loader = new GLTFLoader();

		loader.load( './dist/recources/che/scene.gltf', function ( gltf ) {

			scene.add( gltf.scene );
			console.log("test");

		}, undefined, function ( error ) {

			console.error( error );

		} );
		renderer.render(scene, camera);

	} 
	main();

It looks like you are only rendering once. You’ll need to at least render again in the callback after the glTF is loaded, or set up an animation loop as shown in the glTF loader examples on the site.