What is the best way to add new npm packages?

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

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:

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

Here’s an example from our samples (the @lookingglass/webxr dependency)

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

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

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

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

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

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

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

by user 103054507105067008

It depends on the package. Dont know depthkit unfortunately

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

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

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

I’ll give it another shot tomorrow, no worries will post my findings back

by user 103054507105067008

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

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

by user 103054507105067008

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

devDependencies are the “editor tooling” of node.js :smile: