Speckle Viewer ENOENT error when bundling threejs dependencies with Rollup

Hi! 1st timer here…

I’m just trying to instantiate a viewer and my bundler isn’t able to find some threejs dependencies.

This is the code in my JS file:

import { Viewer, ViewerEvent } from "@speckle/viewer";
const viewer = new Viewer();
console.log(viewer);

This is the ENOENT error I’m getting:

[!] Error: Could not load C:\repos\techcomp-gordian\node_modules\three\src\math\MathUtils (imported by node_modules/@speckle/viewer/dist/index.js): ENOENT: no such file or directory, open 'C:\repos\techcomp-gordian\node_modules\three\src\math\MathUtils'
Error: Could not load C:\repos\techcomp-gordian\node_modules\three\src\math\MathUtils (imported by node_modules/@speckle/viewer/dist/index.js): ENOENT: no such file or directory, open 'C:\repos\techcomp-gordian\node_modules\three\src\math\MathUtils'

And yet when I got to look at the directory, the MathUtils file is there:



I’ve tried the following fixes and none of them have worked for me:

1. Used nvm to use node 18.17.0

λ nvm current
v18.17.1

2. Made sure all package dependencies are correctly installed with npm

λ npm ls
techcomp-goridan@1.0.0 C:\repos\techcomp-gordian
├── @rollup/plugin-commonjs@25.0.4
├── @rollup/plugin-image@3.0.2
├── @rollup/plugin-node-resolve@15.2.0
├── @rollup/plugin-typescript@11.1.2
├── @speckle/objectloader@2.15.1
├── @speckle/viewer@2.15.1
├── rollup-plugin-alias@2.2.0
├── rollup-plugin-serve@2.0.2
├── rollup@3.28.0
└── three@0.140.0

3. My working rollup.config.js file looks like this, been trying all sorts of things even trying to find-and-replace to account for file extension. still not working…

import resolve from "@rollup/plugin-node-resolve";
import image from "@rollup/plugin-image";
import serve from "rollup-plugin-serve";
import alias from "rollup-plugin-alias";

export default {
    input: "./script.js",
    output: [
        {
            format: "esm",
            file: "./bundle.js",
        },
    ],
    plugins: [
        resolve({
            moduleDirectories: ["node_modules"],
            dedupe: ["three"],
            extensions: [".js"],
        }),
        alias({
            entries: [
                {
                    find: "three/src/math/MathUtils",
                    replacement: "three/src/math/MathUtils.js",
                },
            ],
        }),
        image(),
        serve(),
    ],
};

My last idea is that something in node_modules/@speckle/viewer/dist/index.js is throwing off the bundler but it’s obviously not best practice to go in and modify anything there.

Does anyone have any ideas bout how this can be fixed? Maybe I’m just missing a very basic fix.
Hoping to figure this out so I can finally get into the Speckle-verse! Also please let me know if I should be sharing the issue in more useful ways.

Hi @chriskc

Welcome to the forums! Feel free to introduce yourself

We’ll gladly assist you with your issue. Can you share a repo by any chance exhibiting the issue you are describing?

Cheers

Hi @alex!

I’ve created a copy of the code i was working on here: GitHub - chriskc/learn-speckle

Thanks in advance and I’ll definitely introduce myself in the forums!

Chris

Hey @chriskc,

What I think the problem here is, is that you’re using rollup directly to build your web app. This can be done, but rollup is very low level and you’ll need to do a lot of manual configuration to ensure everything builds correctly. I don’t think there’s anything wrong with the @speckle/viewer package in this case, it’s just that your rollup config doesn’t know how to properly deal with it. And even if this specific issue would be resolved, I bet you would run into many more trying to build a proper web app this way.

I suggest that you use vite instead - Vite | Next Generation Frontend Tooling (vitejs.dev)
It’s a bundler that will handle frontend builds out of the box without needing any extra configuration. We already use it in our viewer-sandbox package to serve a frontend app that uses the Viewer.

5 Likes

Thank you, @fabians! I’ll look into Vite and give it a try. Really appreciate your guidance for a newbie here :pray:

Just following up on this. I tried Vite and it worked! What this is prompting for me is that I need to learn more about frontend frameworks to really take advantage of this setup :sweat_smile:

Thanks for helping me with this @fabians!

2 Likes