Help loading library - ScatterGL

Community Help
1

Hello all,

I’ve been trying to run this cool 2d/3d scatter plot based on Three.js scatterGL on Observable, and I came across some errors.

Loading it from npm

I get this error

SCATTERGL = vt: unable to load package.json

The way the lib is bundled using webpack, it adds Three.js as externals

Then Observable try to load Three.js package.json from cdn.jsdelivr.net/npm/THREE, using the external global name.

f
f846×164 17.9 KB

which is not the correct name for Three.js package https://cdn.jsdelivr.net/npm/three/package.json

Is there any way I can overwrite Observable loading Three.js from the wrong location?
What would be a good way to bundle that library to work on Observable? Thinking of loading Three.js separated from scatterGL?

If you add the libs as script tags, it works fine

<!-- Load three.js -->
<script src="https://cdn.jsdelivr.net/npm/three@0.106.2/build/three.min.js"></script>
<!-- Load scatter-gl.js -->
<script src="https://cdn.jsdelivr.net/npm/scatter-gl@0.0.1/lib/scatter-gl.min.js"></script>

ps. If you use https://bundle.run it bundles an incompatible Three.js version with OrbitControls and the error is different and unrelated to Observable

2

I think require.alias should help.

3

Hi @j-f1 amazing! worked so easily. I can’t understand how I’ve missed it from the documentation!

I did

SCATTERGL = await require.alias({
  THREE: "three@0.106.2/build/three.min.js"
})("scatter-gl@0.0.1")
2 Likes