What is the best way to add new npm packages?

šŸŒµ Needle Engine
1

If I want to add a new package via npm, what is the best place to issue the command from?

For exampleā€¦ I open the VSCode workspace and use the menu to open a new terminal and it offers me two paths to openā€¦ one in the main project and one in the node modules folder.

I am going to do ā€˜npm install new-packageā€™ from there, but should I be doing something entirely different like adding the package name to one of the config files instead of manually using the npm install command.

Original Post on Discord

by user 563549194137239552

2

Yes, the main path is right, the engine package is just in the workspace for convenient code search.

Weā€™re not doing anything fancy there, so you can either

  • do npm install --save new-package or
  • add it to package.json manually
    result is the same :slightly_smiling_face:
3

If youā€™re working in NpmDefs and want to access an extra package from there, itā€™s the same ā€“ NpmDefs are just packages themselves.

  • double-click the NpmDef to open its workspace
  • do npm install --save new-package or
  • add it to package.json manually
4

Hereā€™s an example from our samples (the @lookingglass/webxr dependency)

20221130-094304_Unity-572.png
20221130-094304_Unity-572.png1119Ɨ405 61 KB

5

I had an error occur once when i did the --save but i will try again and pay more attention if something doesnā€™t work right. In any case I can do the install without the --save and then add it package.json manually

by user 563549194137239552

6

Sounds good - let me know if you have a log of that error. I also usually install things via command line but with --save

7

I had no problems using vite plugin mkcert via the add to package.json then using the install button from the Export Info component. But I am now trying the same with depthkit.js so I added "depthkit": "^1.0.0", to package.json, used install button, can see it in the node modules folder but in VS Code I want to import it into a ts script like import Depthkit from "depthkit"; and it doesnā€™t register it when I use some sample code like:

import { Behaviour, GameObject } from "@needle-tools/engine/engine-components/Component";
import * as THREE from "three";
import Depthkit from "depthkit";


export class DepthKitExample extends Behaviour {

start()
{
    var depthkit = new DepthKit();
depthkit.load(
    "myClip.txt",
    "myClip.mp4",
    character => {
        scene.add(character);
    }
);
}
}

https://www.npmjs.com/package/depthkit

by user 103054507105067008

8

oof, might have needed to do this import Depthkit from "depthkit/src/depthkit.js";, I think I was relying on VS Code autofill finding scripts in the past but it didnā€™t for this one

by user 103054507105067008

9

Although shortly after that, on local server run I get this error when using this .ts script in the scene, why does the path of the npm module change so much in the build? I assume it is looking for it at import Depthkit from "depthkit/src/depthkit"; when it is probably at import Depthkit from "node_modules/.vite/deps/depthkit_src_depthkit";

GET https://192.168.50.67:3000/node_modules/.vite/deps/depthkit_src_depthkit.js?v=dd714a5d net::ERR_ABORTED 504 (Gateway Timeout)

DepthKitExample.ts

by user 103054507105067008

10

I also get the below error after running in VS Code terminal manually npm install --save depthkit and changing the import to import Depthkit from "depthkit";

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/depthkit.js?v=893bd4ef' does not provide an export named 'default' (at DepthKitExample.ts:2:8)

by user 103054507105067008

11

@marcel :cactus: Is this the way I should reference an npm module?
import { Depthkit } from "depthkit/src/depthkit";

by user 103054507105067008

12

It depends on the package. Dont know depthkit unfortunately

13

Juat wondered if I missed anything obvious, is there anything in the samples I can refer to so I can check I am correctly bringing an npm package in?

by user 103054507105067008

14

if you installed it as Felix described above using npm install etc thatā€™s all correct and the rest is really package specific

15

I only used a custom npm package before with mkcert which isnā€™t something I pull in with scripts at runtime. Just wondering if I can see how another custom npm package imports + runs to cross reference why this depthkit package canā€™t be found in the vite build

by user 103054507105067008

16

Iā€™ll give it another shot tomorrow, no worries will post my findings back

by user 103054507105067008

17

Just odd that the package installs and lives in node_modules but it doesnā€™t pull through into the local server build

by user 103054507105067008

18

Is it because I put it it devDependencies and not dependencies in package.json?

by user 103054507105067008

19

If you put it into devDevependencies it will not be available in a production build, thatā€™s pretty much the definition of it

20

devDependencies are the ā€œeditor toolingā€ of node.js :smile: