Importing an npm package into a foundry system
import minimist from 'minimist';
That line alone when included in my module's hook file is resulting in the system breaking.
Do we need to include webpack/Vite/or something of the sort? Why isn't the software handling this automatically? Is there a tutorial we can follow?
9 Replies
It Depends. ™️
It is possible to import an npm dependency if it's present in the system code in Foundry data and your import path is correct. Basically the same as any other import you do in your entry point.
That said, I strongly advise against including your entire npm_modules folder in your distribution zip. By the nature of npm it easily bloats to a gigantic size.
So, yes, I'd recommend a bundler. A Foundry system is client-side browser code, exactly what bundlers are made for. Foundry doesn't do bundling for systems/modules because there's (excellent) existing tools for that and it's wildly outside of the scope of a self-hosting app to try to auto bundle code for its extensions.
Here's a tutorial for using Vite for Foundry: https://foundryvtt.wiki/en/development/guides/vite
Foundry VTT Community Wiki
Using Vite to build for Foundry
everything you ever wanted from hot module replacement but were afraid to ask
It may be slightly out of date, so take with a grain of salt of course.
@Eranziel Thank you for the pointers/advice
@mfi gave 
LeaguePoints™ to @Eranziel (#132 • 10)
LeaguePoints™ to @Eranziel (#132 • 10)For the time being, and since this system is more home-brew than anything, I am going to go with a browserify setup. I was under the impression that FoundryVTT would (in its backend) handle hosting npm code up as necessary to the frotnend, but I was wrong. Oh well
I highly recommend avoiding Browserify as it is more or less defunct. It was an early bundler tool, but is firmly replaced / not current gen. If you don't have any experience w/ Browserify then it makes more sense to work w/ Vite, but for focused / minimal bundling Rollup is strong. Vite currently uses Rollup under the hood for production builds. Both Vite and Rollup are actively developed whereas Browserify is not.
I mean, Foundry will only serve files that you reference. The client browser won't download everything in npm modules.
The issue is that including npm modules in your distribution zip means everyone who installs it has to download all those files and have them cluttering up their Foundry data folder.
I've had some files that refused to be imported when referenced, even when within the modules folder. I was following the same export pattern, haven't been able to deduce why it was occurring.
Browserify was just the easiest thing to instanty use without any config. I haven't worked with Vita but might take a look.