THREE.JS Runtime + Webpack

briang

I get the following error when I try to use Spine's THREE.JS runtime and webpack. When I build with webpack, I get the following error:

WARNING in ./src/spine-threejs.js 13:13-20
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

My test index.js file looks like this:

import * as THREE from 'three/build/three.module.js';
import { spine } from './spine-threejs.js';
console.log(spine);

I have added

export { spine };

to the bottom of my spine-three.js file per instructions.

I am not sure if the issue is with my webpack configuration or spine runtime. If I import spine-core or spine-webgl, webpack creates the bundle no problem. The error only occurs when I try to import spine-three.js. Any ideas anyone? But I've been wracking my head for a while now. Apologies, if this ends up being more of webpack issue and this forum is not the right place to ask this question.

Mario

I'm afraid I'm not familiar with webpack. I was under the impression, that webpack would just consume any old npm package. Why are you importing from .js files? Also, what's on line 13 in the spine-threejs.js file you are importing?

briang

Thanks for your quick response. I gave up eventually after going down the rabbit hole of typescript configuration, webpack, and alternatively esbuild. I'm out of my depths and unsure what are known issues (i.e. with esbuild: https://github.com/evanw/esbuild/issues/1905) and what is my limited know-how to bundle spine-threejs with the rest of my project. I'll use ES6 modules and separate files for now.