TypeError this.async() is not a function is being throw when new GLTFLoader2() called

[johnmc5810]

I use:
import GLTFLoader2 from 'gltf-loader-2';
then i call
loadGltfFile(gltfFile) {
const gltfLoader = new GLTFLoader2();
return new Promise(function(resolve, reject) {
gltfLoader.load(
gltfFile,
gltf => resolve(gltf),
onProgress,
err => reject(err),
);
});
}

webpack.config
{
test: /.(gltf)$/,
use: [
/* config.module.rule('gltf').use('gltf-loader-2') /
{
loader: 'gltf-loader-2'
}
]
},
/ config.module.rule('gltf2') /
{
test: /gltf..(bin|png|jpe?g|gif)$/,
use: [
/* config.module.rule('gltf2').use('file-loader') */
{
loader: 'file-loader',
options: {
name: 'gltf/[name].[hash:7].[ext]'
}
}
]
}

The gltf file is imported by
import ltHead from '../../assets/gltf/lieutenantHead/lieutenantHead.gltf';

[daniele-pelagatti]

Hi John
Judging from these lines:
import GLTFLoader2 from 'gltf-loader-2'; const gltfLoader = new GLTFLoader2();

you are trying to use the Webpack loader at runtime in order to load the GLTF into some 3D engine.

This is not a runtime loader but a Webpack loader.

have a look at https://github.com/MONOGRID/gltf-loader-2#usage-example-in-threejs for an usage example at runtime of the loader.

[johnmc5810]

So i use the three-gltf-loader to import the file so its
import GLTFLoader from 'three-gltf-loader';
and
const gltfLoader = new GLTFLoader();

When I do that, I get the following exception at runtime.
MapEditor.vue?9295:108 SyntaxError: Unexpected token < in JSON at position 0
at JSON.parse ()
at GLTFLoader.parse (index.js?bd2e:174)
at Object.eval [as onLoad] (index.js?bd2e:85)
at XMLHttpRequest.eval (three.module.js?5a89:34850)

I know this probably isn't an issue with your library but do you know what is wrong here?

[daniele-pelagatti]

No problem,
I'm afraid the three-gltf-loader package you are using is very outdated.

I'm working on a project using this webpack loader right now and I use three-full which is very nice in my opinion.

With three-full you would do (for example):

// I like to import and transpile three-full packages individually by myself but feel free to import the whole three-full if you like
import { GLTFLoader } from 'three-full/sources/loaders/GLTFLoader'
import myGLTF from ./gltf/gltfFile.gltf
let loader = new GLTFLoader()
loader.parse(myGLTF, (scene) => { etc etc })

all this webpack loader does is to allow you to do the bit:
import myGLTF from ./gltf/gltfFile.gltf

so you basically include the gltf + textures in your SRC folder and let webpack include the whole thing in your sources (and output it in your output folder)

[johnmc5810]

I tried using the GLTFLoader supplied with three.js but same issue. After debugging through, the loader is loading the index.html file!!! It tries to parse it as json and throws error, unexpected token