Need some help setting up gltf-transform

[tanaydimri]

Hello All,
First of all, gltf-transform has been a life saver for me for building server side applications that parse a bunch of glb from our asset store and generating a single file with auto-generated material variants, mesh optimisations and many more neat tricks. Thank you so much @donmccurdy for building this library.

I know that this question is probably more about understanding how commonJS vs ES6 modules work but I was hoping to get any help on this that might be possible because I have a feeling that the issue might have something to do with the way gl-matrix is being imported with gltf-transform.

I installed the npm package for gltf-transforms core and functions along with the web app that we are building. The app is a web-component that would later be deployed on our client's website so eventually gets bundled into a single file. Now the problem is when I install the packages I get a whole bunch of errors in the watcher script + when trying to build the app. The errors are all related to gl-matrix not being present in the dist for this package and I tried building the package using "yarn run dist" and "npm run dist" but still don't see "gl-matrix" being bundled with the core.

The image attached below clearly states that I need to "add an extension to the request" but I am not sure where that would be. Is it within the core.modern.js or would I have to either update my packages or use an older version of gltf-transform? Any help would be much appreciated.

[donmccurdy]

Hi @tanaydimri, and thanks!

It sounds like something is going wrong in how Webpack is resolving these imports. You shouldn't normally need to do anything special to have it bundle up dependencies like gl-matrix/vec3. What you're describing as far as bundling sounds like what I'd expect should happen.

Could you share the version number of gltf-transform you've installed, and the webpack configuration file? There were changes in the new gltf-transform v2.2 release that might be related. Or possibly something related to webpack's module resolution configuration, which is documented in https://webpack.js.org/configuration/resolve/.

[donmccurdy]

Thanks! Could you try installing both the packages (and any other gltf-transform packages you're using) at version @2.2.1-alpha.0? Something like:

npm install --save @gltf-transform/[email protected] @gltf-transform/[email protected]

[tanaydimri]

Hey @donmccurdy
Thank you so much for the quick response. It seems to have worked, I can run a localhost dev session and build for production with no issues, but while running in localhost, I do see these errors which do not seem to affect the functionality but I think might be worth fixing for maximum support of the library.

In case you'd like me to share any information or try out something. Please let me know and I'd be happy to assist. Once again, thank you so much. Having access to @gltf-transform/functions definitely helps reduce the file size.

[tanaydimri]

Hey @donmccurdy,
I tried rebuilding today and looks like this error does result in a failed build at our end.

react-scripts build

Creating an optimized production build...
Failed to compile.
Attempted import error: 'KDF_DF_MODEL_UASTC' is not exported from 'ktx-parse' (imported as 'E')

Any suggestions?

[donmccurdy]

I'm hopeful this is all fixed in v2.2.1, with #634 — please let me know if not!

[tanaydimri]

Hey @donmccurdy
I have no idea why I never got a notification for this. Thank you for all the support, I'll check this tomorrow and confirm.

[repalash]

I encountered the same issue with gl-matrix, fixed it by adding fullySpecified to webpack config.

see: https://stackoverflow.com/questions/65922329/babel-cant-resolve-imports-in-it-its-own-source-code/69255531#69255531

[tanaydimri]

Hey @repalash
Thank you for sharing that. I had a quick question:

I believe that setting disables the absolute path check while importing ES6 modules while bundling? I'm not very familiar with webpack, but wouldn't that be dangerous? Considering some packages might still be using relative imports. Unless this takes care of both the cases.

[donmccurdy]

I'm hoping this workaround shouldn't be necessary in the latest gltf-transform releases. gl-matrix includes exports, and webpack should be able to handle that. I'd made a change to the gltf-transform package that seemed to break dependency resolution, but that has been reverted.

[tanaydimri]

I can confirm that the new packages, 2.2.3 in my case work as expected!! 🎉