Unique Project Structure
I have a unique monorepo structure (utilizing npm workspaces) that includes a directory called api. This api directory houses an express API written in typescript. Additionally, the api folder relies on a local package called @myapp/server-lib, which contains TypeScript code.
The organization of directories is as follows:
.
├── api/
└── libs/
└── server-lib/
Problem Statement
A challenge arises when building the api using tsc. The resulting build output includes require statements for @myapp/server-lib. However, upon deploying the API, the server fails to resolve @myapp/server-lib since it's not intended to be installed from the npm registry.
I'm seeking guidance on how to use tsc to compile @myapp/server-lib while removing the require statements and replacing them with references to the imported code. Essentially, I aim for functionality similar to what next-transpile-modules provides for Next.js.
In my attempts to address this issue, I experimented with utilizing TypeScript project references. However, this approach failed to compile the imported @myapp/server-lib. Additionally, I researched why I didn't come across this problem in my NextJS front-end (which resides in the same monorepo and is dependent on a slightly different local package). Ultimately, this led me to explore next-transpile-modules.
I would greatly appreciate any assistance or general tips regarding building a TypeScript project that utilizes a local package. Thank you!
UPDATE (12/28/2022)
I successfully resolved this issue by employing esbuild to build the api into a single file named out.js. This consolidated output includes all dependencies, including @myapp/server-lib.
The updated overall build process now follows these steps:
npx tsc --noEmit # checks types but does not output files
node build.js # leverages esbuild for project build
The corresponding build.js script is as follows:
const nativeNodeModulesPlugin = {
name: 'native-node-modules',
setup(build) {
// If a ".node" file is imported within a module in the "file" namespace, resolve
// it to an absolute path and put it into the "node-file" virtual namespace.
build.onResolve({ filter: /\.node$/, namespace: 'file' }, args => ({
path: require.resolve(args.path, { paths: [args.resolveDir] }),
namespace: 'node-file',
}))
// Files in the "node-file" virtual namespace call "require()" on the
// path from esbuild of the ".node" file in the output directory.
build.onLoad({ filter: /.*/, namespace: 'node-file' }, args => ({
contents: `
import path from ${JSON.stringify(args.path)}
try { module.exports = require(path) }
catch {}
`,
}))
// If a ".node" file is imported within a module in the "node-file" namespace, put
// it in the "file" namespace where esbuild's default loading behavior will handle
// it. It is already an absolute path since we resolved it to one above.
build.onResolve({ filter: /\.node$/, namespace: 'node-file' }, args => ({
path: args.path,
namespace: 'file',
}))
// Tell esbuild's default loading behavior to use the "file" loader for
// these ".node" files.
let opts = build.initialOptions
opts.loader = opts.loader || {}
opts.loader['.node'] = 'file'
},
}
require("esbuild").build({
entryPoints: ["./src/server.ts"], // server entrypoint
platform: "node",
target: "node16.0",
outfile: "./build/out.js", // bundled single output file
bundle: true,
loader: {".ts": "ts"},
plugins: [nativeNodeModulesPlugin], // handles native node modules (e.g., fs)
})
.then((res) => console.log(`⚡ Bundled!`))
.catch(() => process.exit(1));