Working with Basis Universal compressed textures using BasisTextureLoader

[lairdkruger]

G'day, just wondering if anybody has successfully managed to work with Three.js' BasisTextureLoader in a R3F project? I'm currently working on a project that requires many high resolution textures and am very keen to compress these as much as possible - Basis Universal texture compression seems to be a good way of doing this.

However, I cannot get the BasisTextureLoader to work, either with normal js (not ideal for R3F but just doing it as a test):

const { gl } = useThree()

useEffect(() => {
	const basisLoader = new BasisTextureLoader()
	basisLoader.setTranscoderPath('examples/js/libs/basis/')
	basisLoader.detectSupport(gl)
	basisLoader.load('../../textures/Scene10/Atlas10.basis')
}, [gl])

or within R3F's useLoader hook like this:

const { gl } = useThree()

const basisTextures = useLoader(
	BasisTextureLoader,
	'../../textures/Scene10/Atlas10.basis',
	(loader) => {
		const basisLoader = new BasisTextureLoader()
		basisLoader.setTranscoderPath('three/examples/js/libs/basis/')
		basisLoader.detectSupport(gl)
	}
)

I'm importing the BasisTextureLoader like so:

import { BasisTextureLoader } from 'three/examples/jsm/loaders/BasisTextureLoader'

And receiving the following error message for both the standard three.js method & useLoader. The error points to the top of the HTML file for the webworkers used by the BasisTextureLoader:

It's not the most helpful error message I've ever seen so I'm struggling to work out what's going on.
Has anyone had any luck working loading Basis Universal textures themselves, or can help me out it'll be much appreciated :)

The project is using webpack by the way.

[lairdkruger]

Paul provided a sandbox here

I was having the same issue, all came down to file paths essentially. Incorrect file paths were instead returning HTML files so your unexpected identifier was the first character of .

Link to discourse thread where I found the answer