ThreeJS gILF loader

Below was the code executed. 

import { GLTFLoader } from './threejs/examples/jsm/loaders/GLTFLoader.js';

var loader = new GLTFLoader();

loader.load(

// resource URL

'./models/BoomBox.gltf',

// called when the resource is loaded

function (gltf) {

scene.add(gltf.scene);

},

// called while loading is progressing

function (xhr) {

console.log((xhr.loaded / xhr.total * 100) + '% loaded');

},

// called when loading has errors

function (error) {

console.log('An error happened', error);

}

);

But this was getting into error like this below 

An error happened Error: THREE.GLTFLoader: Attempting to load .dds texture without importing DDSLoader

    at new GLTFTextureDDSExtension (GLTFLoader.js:415)

    at GLTFLoader.parse (GLTFLoader.js:318)

    at Object.onLoad (GLTFLoader.js:159)

    at XMLHttpRequest.<anonymous> (three.module.js:36508)

This error was not present for some of the gilt files, 

However even if simple Duck gltf, below was happening

three.js:35 THREE.Object3D.add: object not an instance of THREE.Object3D. Group {uuid: "197AE6DC-104B-4563-9FAA-E49078A3484F", name: "", type: "Group", parent: null, children: Array(1), …}

References:

https://threejs.org/docs/#examples/en/loaders/GLTFLoader