Speckle Viewer (using rollup) is missing threejs dependencies

Hi im working with sveltejs/template ( which comes with rollup) to create a basic dashboard. the thing is when i install the speckle viewer package i notice that it gives the following warning

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@speckle/viewer@2.7.1',
npm WARN EBADENGINE   required: { node: '^16.0.0' },
npm WARN EBADENGINE   current: { node: 'v17.4.0', npm: '8.3.1' }
npm WARN EBADENGINE }

and when i try to build after calling the viewer anywhere on my app i get the following error.

bundles src/main.js → public/build/bundle.js...
[!] Error: Could not load D:\Downloads\00-Rapid Dev\IoTDashboardSvelte\iotdashboard_ctec\node_modules\three\examples\jsm\utils\BufferGeometryUtils (imported by node_modules/@speckle/viewer/dist/speckleviewer.esm.js): ENOENT: no such file or directory, open 'D:\Downloads\00-Rapid Dev\IoTDashboardSvelte\iotdashboard_ctec\node_modules\three\examples\jsm\utils\BufferGeometryUtils'

pretty sure is a rollup config issue but all things i have try in the last two days are getting nowhere.

any ideas are welcome!

this is my rollup config right now (have been trying a lot of stuff

import svelte from 'rollup-plugin-svelte';
import commonjs from '@rollup/plugin-commonjs';
import nodeResolve from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';
//import rebasePlugin from 'rollup-plugin-rebase';
//import copyPlugin from 'rollup-plugin-copy';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import css from 'rollup-plugin-css-only';
//import renameNodeModules from 'rollup-plugin-rename-node-modules'

const production = !process.env.ROLLUP_WATCH;

function serve() {
	let server;

	function toExit() {
		if (server) server.kill(0);
	}

	return {
		writeBundle() {
			if (server) return;
			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
				stdio: ['ignore', 'inherit', 'inherit'],
				shell: true
			});

			process.on('SIGTERM', toExit);
			process.on('exit', toExit);
		}
	};
}


export default [
	{
	
	input: 'src/main.js',
	output: {
		sourcemap: true,
		format: 'iife',
		name: 'app',
		file: 'public/build/bundle.js',
	},
	
	plugins: [
		//[renameNodeModules("ext")],
		replace({
			preventAssignment: true,
        }),
		svelte({
			compilerOptions: {
				// enable run-time checks when not in production
				dev: !production
			}
		}),
		// we'll extract any component CSS out into
		// a separate file - better for performance
		css({ output: 'bundle.css' }),

		// If you have external dependencies installed from
		// npm, you'll most likely need these plugins. In
		// some cases you'll need additional configuration -
		// consult the documentation for details:
		// https://github.com/rollup/plugins/tree/master/packages/commonjs
		nodeResolve({
			browser: true,
			jsnext:true,
			main:true,
			browser:true,
			dedupe: ['svelte']
		}),
		commonjs({}),

		// In dev mode, call `npm run start` once
		// the bundle has been generated
		!production && serve(),

		// Watch the `public` directory and refresh the
		// browser on changes when not in production
		!production && livereload('public'),

		// If we're building for production (npm run build
		// instead of npm run dev), minify
		production && terser()
	],
	watch: {
		clearScreen: false
	}
}];

Maybe @fabians can help untangle this! It looks like there’s a node version conflict - we’re pinned to 16, but 17 shouldn’t necessarily throw errors.

In case you’re using nvm to manage node versions, you could try switching with nvm install 16 & nvm use 16 + reinstalling the dependencies.

1 Like

@Ricardo_Zepeda

The supported node version range is a bit strict for the viewer currently, we will look into relaxing that, but for the time being - can you try out the same setup with Node 16 as Dimitrie instructed?

I did just try installing @speckle/viewer in a new project and I was able to install it correctly and I can find the BufferGeometryUtils script in node_modules as well, which leads me to believe that the issue is somewhere in how your build config is setup. You did share the rollup config, but build processes are complicated and made up of many moving parts, so it would be more useful for debugging to see the entire configuration. Could you share a reproduction repo?

1 Like

Thanks alot for the help! im already trying the nvm 16 alternative to see if it helps.

here is the repo to the project im having issues with GitHub - BadAstronaut/CTeC_DigitalTwin: PoC Digital Twin CTeC

let me know if that helps narrowing down the issue

1 Like

Cool! thanks! im going to try this today!

1 Like

Hi Dimitrie just an update, i installed node 16 and i dont get the engine warning as expected but im still getting the missing BufferGeometryUtils error

thanks for the help! any other ideas are welcome

@Ricardo_Zepeda I just cloned and successfully built the reproduction repo in a Linux environment, maybe it’s a Windows issue? When it comes to web development on Windows, I suggest using WSL anyway (which is what I use).

Just now I was able to build (npm run build) the project even in a Windows environment:

PS C:\Users\fabis\Documents\Code\CTeC_DigitalTwin> npm run build

> svelte-app@1.0.0 build
> rollup -c


src/main.js → public/build/bundle.js...
(!) Plugin svelte: KpiCards has unused export property 'iotRes'. If it is for external reference only, please consider using `export const iotRes`
src/components/kpiCards.svelte
 5:   import {kpiProcesor} from "../lib/iot/fetchData";
 6:   import {prototypeModel} from '../lib/stores/iotStore.js';
 7:   export let iotRes;
                 ^
 8:   export let iotDataCatch;
 9:   //console.log(iotDataCatch);
(!) Plugin svelte: KpiCards has unused export property 'iotDataCatch'. If it is for external reference only, please consider using `export const iotDataCatch`
src/components/kpiCards.svelte
 6:   import {prototypeModel} from '../lib/stores/iotStore.js';
 7:   export let iotRes;
 8:   export let iotDataCatch;
                 ^
 9:   //console.log(iotDataCatch);
10:   let kpiHolder;
(!) Plugin svelte: Unused CSS selector "h1"
src/components/kpiCards.svelte
36:   }
37:
38:   h1 {
      ^
39:     color: gray;
40:     text-transform: uppercase;
(!) Circular dependency
src/components/kpiCards.svelte -> src/components/kpiCard.svelte -> src/components/kpiCards.svelte
created public/build/bundle.js in 4.7s

I guess I would suggest re-setting up the project. Wipe node_modules and reinstall those, maybe that helps, or just clone the repo from scratch.

2 Likes

Thanks Fabian! the clean npm install worked for me! really appreciate the assistence

3 Likes