Using SplineRuntime with Webpack and Babel

[eliasfuericht]

Hello,
First of all, I know that this isn't the splinetool/runtime repo, because that doesnt exist on github, sadly... I hope it is still okay if I ask this here, because its also developed by splinetool.
I am currently working on a project where I import a Splinescene with the splineruntime into my project - I have developed it locally in JS with npm create vite@latest and everything worked great. However, now I am trying to transfer my code from my local JS-project into a larger project, which is using webpack for packaging and babel. And now, whenever I try to create my spline application, like this:

import { Application } from '@splinetool/runtime';
const canvas = document.getElementById('canvas3d') as HTMLCanvasElement;
const spline = new Application(canvas);

I get this error:

ERROR in ./node_modules/@splinetool/runtime/build/runtime.js 3138:177294
Module parse failed: Unexpected token (3138:177294)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|       float std_dev = sqrt( squared_mean - mean * mean );
|       gl_FragColor = pack2HalfToRGBA( vec2( mean, std_dev ) );
> }`

and it goes on and on (I think its printing the whole runtime-file to the console). Does anyone have an idea how I could fix this?

I am using:
-typescript: 4.2.3
-webpack: 4.46.0
-webpack-cli: 4.9.2
-babel: 7.18.2

[marcofugaro]

Hey, you should switch to webpack 5.

[eliasfuericht]

thank you for the information :)
By the way, I love your work with Spline, the tool is literally so helpful for creating 3D interactive stuff in WebGL - I know I am asking for a lot, but it would be awesome if there was a bit more documentation, or maybe you could make the splinetool/runtime open source like the postpro and spline-react :)
Anyways tho, hope you have a great rest of your day, whereever you are