Error updating a specific dependency crashes the application

diegoeloko · August 14, 2024, 11:21pm

Using :

Unity 2022.3.15f1 LTS
Needle Engine 3.29.0
Node js 16.5.1

Hi everyone, hoping you’re doing well. I’m testing some features in a specific version of Needle. The problem is that, when I hit on Play the project deploys but a lot of objects in the scene are lost in the browser’s window, among them for example, some 3D models. In the VITE console the next error is showed :

X [ERROR] Could not read from file: D:..\node_modules\three\examples\jsm\objects\GroundedSkybox.js

    node_modules/@needle-tools/engine/lib/engine-components/GroundProjection.js:7:51:
      7 │ import { GroundedSkybox as GroundProjection } from 'three/examples/jsm/objects/GroundedSkybox.js';

[vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/@needle-tools/engine/lib/engine-components/GroundProjection.js:7:51: ERROR: Could not read from file: D:\...\node_modules\three\examples\jsm\objects\GroundedSkybox.js
    at failureErrorWithLog (D:\...\node_modules\esbuild\lib\main.js:1636:15)
    at D:\...\node_modules\esbuild\lib\main.js:1048:25
    at D:\...\node_modules\esbuild\lib\main.js:1512:9
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

And also the next error :

X [ERROR] Could not read from file: D:\...\node_modules\three\examples\jsm\objects\GroundedSkybox.js

 node_modules/@needle-tools/engine/lib/engine/engine_three_utils.js:3:31:
      3 │ import { GroundedSkybox } from "three/examples/jsm/objects/GroundedSkybox.js";

[vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/@needle-tools/engine/lib/engine/engine_three_utils.js:3:31: ERROR: Could not read from file: D:\...\node_modules\three\examples\jsm\objects\GroundedSkybox.js
    at failureErrorWithLog (D:\...\node_modules\esbuild\lib\main.js:1636:15)
    at D:\...\node_modules\esbuild\lib\main.js:1048:25
    at D:\...\node_modules\esbuild\lib\main.js:1512:9
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

For testing reasons , it would be desirable to use the same Needle Engine version (3.29).

What have I tried ?

I’ve updated the node version, I’ve used node 20.16.0 and 10.9.0 the same errors have been thrown.
I’ve re-install all the project and made a Clean Install and the same errors have been thrown.
The Needle Console messages in the Unity editor just plot that the project has been installed and the local server is launched.

Has anyone figured out how to solve this?

needle-assistant · August 14, 2024, 11:21pm

Hi Diegoeloko! I’m an AI-powered assistant here to help you. I can provide assistance regarding Needle Engine, three.js, and basic Unity or Blender help. Please let me know your specific question, and make sure to include your OS as well as the versions of Needle Engine, Unity, or Blender you are using for further assistance.

2 replies left - GPT 4O
thread_VEHKXDaXe5Ctb84m7eZfUZuN
Reply to this message to continue the conversation

diegoeloko · August 14, 2024, 11:25pm

Using :

Microsoft Windows 11 Home 10.0.22631 23H2
Unity 2022.3.15f1 LTS
Needle Engine 3.29.0
Node js 16.5.1

Hi everyone, hoping you’re doing well. I’m testing some features in a specific version of Needle. The problem is that, when I hit on Play the project deploys but a lot of objects in the scene are lost in the browser’s window, among them for example, some 3D models. In the VITE console the next error is showed :

X [ERROR] Could not read from file: D:..\node_modules\three\examples\jsm\objects\GroundedSkybox.js

    node_modules/@needle-tools/engine/lib/engine-components/GroundProjection.js:7:51:
      7 │ import { GroundedSkybox as GroundProjection } from 'three/examples/jsm/objects/GroundedSkybox.js';

[vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/@needle-tools/engine/lib/engine-components/GroundProjection.js:7:51: ERROR: Could not read from file: D:\...\node_modules\three\examples\jsm\objects\GroundedSkybox.js
    at failureErrorWithLog (D:\...\node_modules\esbuild\lib\main.js:1636:15)
    at D:\...\node_modules\esbuild\lib\main.js:1048:25
    at D:\...\node_modules\esbuild\lib\main.js:1512:9
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

And also the next error :

X [ERROR] Could not read from file: D:\...\node_modules\three\examples\jsm\objects\GroundedSkybox.js

 node_modules/@needle-tools/engine/lib/engine/engine_three_utils.js:3:31:
      3 │ import { GroundedSkybox } from "three/examples/jsm/objects/GroundedSkybox.js";

[vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/@needle-tools/engine/lib/engine/engine_three_utils.js:3:31: ERROR: Could not read from file: D:\...\node_modules\three\examples\jsm\objects\GroundedSkybox.js
    at failureErrorWithLog (D:\...\node_modules\esbuild\lib\main.js:1636:15)
    at D:\...\node_modules\esbuild\lib\main.js:1048:25
    at D:\...\node_modules\esbuild\lib\main.js:1512:9
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

For testing reasons , it would be desirable to use the same Needle Engine version (3.29).

What have I tried ?

I’ve updated the node version, I’ve used node 20.16.0 and 10.9.0 the same errors have been thrown.
I’ve re-installed all the project and made a Clean Install and the same errors have been thrown.
I’ve re-installed three js and updated it.
The Needle Console messages in the Unity editor just plot that the project has been installed and the local server is launched.

Has anyone figured out how to solve this?

needle-assistant · August 14, 2024, 11:25pm

Hi Diegoeloko! The errors you’re encountering suggest that the GroundedSkybox.js file from the Three.js examples is missing or not accessible in your project. Here’s how to troubleshoot and potentially resolve the issue:

Check Installation: Ensure that Three.js is properly installed in your project. You should have three installed within your node_modules directory. You can do this by running:
```
npm install three
```
Verify File Path: When importing GroundedSkybox, confirm that the path matches exactly with your local node_modules. Check to see if the file actually exists at node_modules/three/examples/jsm/objects/GroundedSkybox.js.
Update Dependencies: Sometimes conflicts can occur due to outdated packages. Make sure all dependencies are up-to-date by running:
```
npm update
```
Clear Cache: Clean the Vite cache and reinstall:
```
npm cache clean --force
npm install
```
Replace Import: If the file is genuinely missing, consider replacing the import or verifying the Needle Engine documentation for an alternative implementation.
Check for Configuration Issues: Ensure your Vite configuration is pointing to the correct paths and that it allows importing from node_modules.

If these steps do not resolve the issue, please provide additional details about your project setup, and we can further troubleshoot!

1 replies left - GPT 4O
thread_VEHKXDaXe5Ctb84m7eZfUZuN
Reply to this message to continue the conversation

diegoeloko · August 14, 2024, 11:37pm

I’ve tried from step 1 to 4 and they didn’t work, but could you explain me with detail how can I Replace Import and Check for Configuration Issues ?

needle-assistant · August 14, 2024, 11:37pm

Sure, Diegoeloko! Here’s a detailed explanation for both replacing the import and checking configuration issues:

1. Replace Import

If GroundedSkybox.js is missing or causing issues, you can try an alternative import or create a custom implementation. Here’s how to replace the import:

Locate Usage: Find instances where GroundedSkybox is imported in your codebase, usually within files like GroundProjection.js and engine_three_utils.js.

Alternative Import: If you need to replace it, you can comment out the problematic import and use a simpler or alternative 3D model class from Three.js that serves a similar purpose. For example:

// Original import
// import { GroundedSkybox as GroundProjection } from 'three/examples/jsm/objects/GroundedSkybox.js';

// Alternative import (if applicable)
import { BoxGeometry, MeshBasicMaterial, Mesh } from 'three';

// Create a simple box to visualize instead
const geometry = new BoxGeometry(1, 1, 1);
const material = new MeshBasicMaterial({ color: 0x00ff00 });
const cube = new Mesh(geometry, material);
scene.add(cube);

Custom Implementation: If you’re specifically reliant on features from GroundedSkybox, you may need to rewrite that portion of code using available Three.js objects.

2. Check for Configuration Issues

This involves ensuring that your Vite and project settings are correct.

Vite Configuration: Open your vite.config.js file (or similar). Ensure it is set up to resolve modules correctly.

Example configuration:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      'three': path.resolve(__dirname, 'node_modules/three'),
    },
  },
  plugins: [vue()],
});

Check Project Structure: Ensure your project structure aligns with the configuration paths you’ve specified.
Recheck Imports: Make sure you are using the correct import statement and paths relative to your project structure.

After making these adjustments, save your files and restart your development server to apply the changes. If you continue to face issues, please provide snippets of your configuration or relevant parts of your code for further assistance.

0 replies left - GPT 4O
thread_VEHKXDaXe5Ctb84m7eZfUZuN
Reply to this message to continue the conversation

marcel · August 15, 2024, 7:45am

Hi, I think you’re mixing different threejs versions with older Needle Engine versions.

The error Could not read from file: D:\...\node_modules\three\examples\jsm\objects\GroundedSkybox.js indicates that you might be using a threejs version where the file waas named GroundProjection.js - which version of threejs do you have installed at the moment?

diegoeloko · August 15, 2024, 4:55pm

Hi @marcel , thanks for answering.
These are my versions :

C:\Users\diego>npm show three version
0.167.1

C:\Users\diego>npm -v
10.8.2

C:\Users\diego>node -v
v20.16.0

C:\Users\diego>nvm -v
1.1.12

marcel · August 15, 2024, 5:14pm

Hi Diego, the threejs version you are currently using is not yet supported by us (we will upgrade soon again).

Can you show what’s written in your package.json?

You should have "three": "npm:@needle-tools/three@^0.162.7" when you’re using latest Needle Engine

diegoeloko · August 15, 2024, 5:25pm

Sure, here it is :

{
  "name": "@needle-tools/engine",
  "version": "3.44.6",
  "description": "Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in",
  "main": "dist/needle-engine.umd.cjs",
  "type": "module",
  "repository": {
    "type": "git",
    "url": "https://github.com/needle-tools/needle-engine-support"
  },
  "bugs": {
    "url": "https://github.com/needle-tools/needle-engine-support/issues"
  },
  "homepage": "https://needle.tools",
  "author": {
    "name": "Needle",
    "email": "hi@needle.tools",
    "url": "https://needle.tools/"
  },
  "scripts": {
    "dev": "npm-watch",
    "build": "npm run build:dist && npm run build:dist:light && npm run build:src",
    "build:dist": "vite build -- --noclear",
    "build:dist:light": "vite build -- --light --noclear",
    "build:src": "tsc --rootDir ./src --outDir ./lib --noEmit false --declaration",
    "build:license": "node plugins/publish/create-license.mjs",
    "build:components-data": "node plugins/publish/create-component-types.now.mjs",
    "test": "node plugins/test/test.mjs",
    "test:circular-imports": "node plugins/test/check-circular-imports.mjs",
    "test:tsc": "tsc --strict false && tsc --strict true",
    "lint": "eslint --ext .ts src",
    "lint:fix": "eslint --ext .ts src --fix",
    "stats": "howfat ."
  },
  "files": [
    "package.json",
    "README.md",
    "CHANGELOG.md",
    "LICENSE.md",
    "src",
    "dist",
    "lib",
    "plugins",
    "components.needle.json"
  ],
  "keywords": [
    "needle",
    "threejs",
    "unity",
    "blender",
    "ar",
    "augmented reality",
    "glTF",
    "glb",
    "webgl",
    "webar",
    "webvr",
    "webxr",
    "3d",
    "khronos"
  ],
  "dependencies": {
    "@dimforge/rapier3d-compat": "^0.12.0",
    "@needle-tools/gltf-progressive": "^1.2.5-beta",
    "@webxr-input-profiles/motion-controllers": "^1.0.0",
    "flatbuffers": "2.0.4",
    "md5": "^2.3.0",
    "n8ao": "^1.8.2",
    "peerjs": "1.4.7",
    "postprocessing": "^6.35.5",
    "simplex-noise": "^4.0.1",
    "stats.js": "^0.17.0",
    "three": "npm:@needle-tools/three@^0.162.4",
    "three-mesh-ui": "npm:@needle-tools/three-mesh-ui@^7.1.5-alpha.5",
    "three.quarks": "0.10.8",
    "uuid": "^9.0.0",
    "websocket-ts": "^2.1.5"
  },
  "devDependencies": {
    "@babel/runtime": "^7.16.0",
    "@luncheon/esbuild-plugin-gzip": "^0.1.0",
    "@needle-tools/helper": "^1.8.0",
    "@needle-tools/needle-component-compiler": "^1.9.3",
    "@stylistic/eslint-plugin-ts": "^1.5.4",
    "@types/node": "^20.14.8",
    "@types/three": "0.162.0",
    "@typescript-eslint/eslint-plugin": "^6.2.0",
    "@typescript-eslint/parser": "^6.2.0",
    "esbuild": "^0.15.10",
    "esbuild-node-externals": "^1.5.0",
    "eslint": "^8.56.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-no-secrets": "^0.8.9",
    "eslint-plugin-no-unsanitized": "^4.0.2",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-simple-import-sort": "^10.0.0",
    "eslint-plugin-xss": "^0.1.12",
    "filehound": "^1.17.6",
    "fs-extra": "^11.1.1",
    "ftp-deploy": "^2.4.4",
    "howfat": "^0.3.7",
    "jsdoc-babel": "^0.5.0",
    "jsdoc-to-markdown": "^7.1.1",
    "madge": "^5.0.1",
    "npm-watch": "^0.11.0",
    "typescript": "^4.5.5",
    "vite": "<= 4.3.9"
  },
  "peerDependencies": {
    "open": "^10.1.0"
  },
  "watch": {
    "test:circular-imports": {
      "patterns": [
        "engine/*",
        "engine-components/*",
        "engine-experimental/**/*"
      ],
      "extensions": "ts",
      "quiet": false
    },
    "build:dist": {
      "patterns": [
        "engine/*",
        "engine-components/*",
        "engine-experimental/**/*"
      ],
      "extensions": "ts",
      "quiet": false
    }
  },
  "module": "lib/needle-engine.js",
  "typings": "lib/needle-engine.d.ts",
  "types": "lib/needle-engine.d.ts",
  "exports": {
    ".": {
      "import": "./lib/needle-engine.js",
      "require": "./dist/needle-engine.umd.cjs"
    },
    "./package.json": "./package.json",
    "./plugins/vite/index.js": "./plugins/vite/index.js",
    "./plugins/next/index.js": "./plugins/next/index.js"
  }
}

marcel · August 15, 2024, 5:43pm

That’s the package.json from the needle-engine package - your web project also has a package.json

diegoeloko · August 15, 2024, 6:05pm

Srry, you’re right. Here it is :

{
  "name": "my-needle-engine-project",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "start": "vite --host",
    "build:dev": "vite build",
    "build:production": "vite build -- --production",
    "gltf:transform": "npm run transform --prefix node_modules/@needle-tools/gltf-build-pipeline"
  },
  "dependencies": {
	  "@needle-tools/engine": "^3.47.3-beta",
	  "rollup-plugin-copy": "^3.5.0",
	  "three": "npm:@needle-tools/three@^0.162.7"
	},
  "devDependencies": {
	  "@needle-tools/helper": "^1.9.0",
	  "@types/three": "0.162.0",
	  "@vitejs/plugin-basic-ssl": "^1.0.1",
	  "typescript": "^5.0.4",
	  "vite": "<= 4.3.9",
	  "vite-plugin-compression": "^0.5.1"
	}
}

diegoeloko · August 15, 2024, 7:51pm

Hi @marcel , I’ve found that when I hit on Play, my project package.json is overwritten and the field of three shows a different version than I have :

{
  "name": "my-needle-engine-project",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "start": "vite --host",
    "build:dev": "vite build",
    "build:production": "vite build -- --production",
    "gltf:transform": "npm run transform --prefix node_modules/@needle-tools/gltf-build-pipeline"
  },
  "dependencies": {
	  "@needle-tools/engine": "^3.29.0",
	  "rollup-plugin-copy": "^3.5.0",
	  "three": "npm:@needle-tools/three@^0.154.3"
	},
  "devDependencies": {
	  "@needle-tools/helper": "^1.6.0",
	  "@types/three": "0.154.0",
	  "@vitejs/plugin-basic-ssl": "^1.0.1",
	  "typescript": "^5.0.4",
	  "vite": "<= 4.3.9",
	  "vite-plugin-compression": "^0.5.1"
	}
}

And then, following some ChatGPT instructions i got this :

my-needle-engine-project@1.0.0 D:\..\UnityProject\Needle\Workspace
├─┬ @needle-tools/engine@3.44.6
│ ├─┬ @needle-tools/gltf-progressive@1.2.9
│ │ └── three@npm:@needle-tools/three@0.162.7 deduped
│ ├─┬ n8ao@1.8.4
│ │ └── three@npm:@needle-tools/three@0.162.7 deduped
│ ├─┬ postprocessing@6.36.0
│ │ └── three@npm:@needle-tools/three@0.162.7 deduped
│ ├─┬ three-mesh-ui@npm:@needle-tools/three-mesh-ui@7.1.5-alpha.5
│ │ └── three@npm:@needle-tools/three@0.154.3 deduped
│ ├─┬ three.quarks@0.10.8
│ │ └── three@npm:@needle-tools/three@0.154.3 deduped
│ └── three@npm:@needle-tools/three@0.162.7
└── three@npm:@needle-tools/three@0.154.3

so it seems that some three dependencies are using different versions of three. I’m very noob in this topic so I’m not sure what I have to change in order to fix those mix versions. Could it be that the root of the problem ?

marcel · August 15, 2024, 9:37pm

Hi Diego, so you’re actually still using the Needle Engine Unity package version 3.29.0 - the installed versions woudl then be expected.

What ChatGPT instructions did you follow exactly? You’re indeed mixing up three.js versions here. If you want to keep using 3.29 then three.js 154 would be right and 162 is wrong and causing the issue here

Your title says you updated a dependency - what are you referring to?

Topic		Replies	Views
Vite 'Could not resolve issues' error for all engine files 🌵 Needle Engine question	32	68	January 8, 2023
Node_modules/three issue with update of Exporter to 2.62.0-pre 🌵 Needle Engine question	7	39	February 18, 2023
How to use an specific version of Needle Engine 🌵 Needle Engine question	6	8	September 9, 2024
Build error and don't know why, tell me why (ain't nothing but a heartache) 🌵 Needle Engine question	3	31	September 14, 2023
Trouble when I update needle package 🌵 Needle Engine question	16	29	March 22, 2023

Error updating a specific dependency crashes the application

What have I tried ?

What have I tried ?

1. Replace Import

2. Check for Configuration Issues

Related Topics