How do I build and bundle 4.x?

[yamiteru]

I have a CLI app that I've built with Ink 4.3.0 and now I want to build it.

The first issue is that it wants to include react devtools which makes the bundle too big.

The second issue is that when I want to run the bundled app I get this error:

file:///Users/yamiteru/dev/rsc-pkg/dist/chunk-6GQNG4BR.mjs:12
  throw Error('Dynamic require of "' + x + '" is not supported');
        ^

Error: Dynamic require of "assert" is not supported
    at file:///Users/yamiteru/dev/rsc-pkg/dist/chunk-6GQNG4BR.mjs:12:9
    at node_modules/.pnpm/[email protected]/node_modules/signal-exit/index.js (file:///Users/yamiteru/dev/rsc-pkg/dist/index.mjs:2953:16)
    at __require2 (file:///Users/yamiteru/dev/rsc-pkg/dist/chunk-6GQNG4BR.mjs:15:50)
    at file:///Users/yamiteru/dev/rsc-pkg/dist/index.mjs:33962:35
    at ModuleJob.run (node:internal/modules/esm/module_job:192:25)

Node.js v20.2.0

This is how mu build script looks like:

import { build } from "esbuild";

build({
  bundle: true,
  entryPoints: ["src/index.tsx"],
  logLevel: "info",
  // minify: true,
  platform: "node",
  sourcemap: "linked",
  treeShaking: true,
  outdir: "dist",
  target: ["esnext", "node18.0.0"],
  external: ["react-devtools-core"],
  format: "esm",
  outExtension: { ".js": ".mjs" },
  splitting: true,
});

[wernst]

This isn't an issue with React ink. For esm packages with esbuild, I usually add a banner:

  banner: {
    js: `
import { fileURLToPath as _fileURLToPath } from 'url';
import { createRequire as topLevelCreateRequire } from 'module';
import _path from 'path';
const require = topLevelCreateRequire(import.meta.url);
const __filename = _fileURLToPath(import.meta.url);
const __dirname = _path.dirname(__filename);
`,
  },

Which set some values that might be used in your code / the transpiled code. Specifically, require is defined.

[yamiteru]

I've fixed it by using tsup.