How to setup a nodejs project so client side node modules resolve in the browser

I have a nodejs and web project that has been getting more complex with time.

In the nodejs side I’m able to easily import and use node modules but on the web page size I’m getting errors when trying to use node modules.

My vscode project is setup like so:

/(nodejs pages here)
/public/(web pages here)
/public/myproject.js
/public/myproject.ts
/public/mypage.html
/public/lib/pixi/(pixijs files here) /* manually copied the files here */
/node_modules/(modules here)

I have a typescript file in the public directory and when I import it into my class the compiler has code complete. But when I load the page in the browser I get errors:

Uncaught TypeError: Failed to resolve module specifier “pixi.js”.
enter image description here

So, I manually moved the pixijs folder from node_modules/pixi.js to a directory in the public folder this seems to work but for some reason it’s not finding one of the classes.

import * as PIXI from 'pixi.js';
import { getCanvasBoundingBox } from "./lib/pixi/pixi.mjs";

Uncaught SyntaxError: The requested module './lib/pixi/pixi.mjs' does not provide an export named 'getCanvasBoundingBox'

Does anyone know how to setup a nodejs project so that I can import node modules into my client side pages? I put all the web pages in /public because the guides online said that’s what you do but the browser doesn’t seem to like that as I’ve shown.

Here is part of my nodejs server page:

// html page template system
app.set("view-engine", "ejs");

// the default directory path for web pages 
app.use(express.static('public'));

// starts the server
app.listen(PORT, () => {
  var date = new Date();
  var time = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
  console.clear();
  console.log(`App running at http://localhost:${PORT} at ${time}`);
})

Ideally, what I want is a vscode project that fulfills these requirements:

  • has nodejs pages (ts pages)
  • has web pages (html, ts, css)
  • shares ts classes between nodejs and web ts/js)
  • both can import node modules
  • can use one tsconfig for both (or independent)
  • restarts the server on save
  • doesn’t restart the server on client side ts to js on save
  • i don’t want to use a web pack or whatever because i’m saving a file every 30 seconds (i don’t think i should have to)

All of the requests mention above work independently but it’s been extremely difficult to get them to all work together at the same time.