bug: esbuild keeps saying import will be undefined

[okikio]

Esbuild keeps saying "the bundle will always be undefined", and it logs this error for all import's,

 > src/api.ts: warning: Import "Manager" will always be undefined
    1 │ import { Manager, methodCall } from "@okikio/manager";
      ╵          ~~~~~~~

 > src/api.ts: warning: Import "methodCall" will always be undefined
    1 │ import { Manager, methodCall } from "@okikio/manager";
      ╵                   ~~~~~~~~~~

2 warnings
 > src/api.ts: warning: Import "Manager" will always be undefined
    1 │ import { Manager, methodCall } from "@okikio/manager";
      ╵          ~~~~~~~

 > src/api.ts: warning: Import "methodCall" will always be undefined
    1 │ import { Manager, methodCall } from "@okikio/manager";
      ╵                   ~~~~~~~~~~

2 warnings

Esbuild version: ^0.8.26
Config:

// tsconfig.json
{
    "compilerOptions": {
        "moduleResolution": "node",
        "target": "ES2020",
        "module": "ES2020",
        "sourceMap": true,
        "outDir": "lib",
        "incremental": true,
        "isolatedModules": true,
        "esModuleInterop": true
    },
    "exclude": [
        "node_modules",
        "./tests/**/*",
        "./lib/**/*",
        "./@types/**/*"
    ]
}

// build.js
const { source } = require("./package.json");

const globalName = "emitter";
const { startService } = require("esbuild");

const outputs = [
    {
        outfile: "lib/api.modern.js",
        format: "esm",
        target: ["es2020"],
    },
    {
        outfile: "lib/api.node.js",
        platform: "node",
        target: ["es2020"],
        format: "cjs",
    },
    {
        outfile: "lib/api.js",
        platform: "browser",
        format: "iife",
        target: ["es2020"],
        minify: true,
    }
];

// Start build service
let service,
    logs = "",
    promises;

let buildData = {
    entryPoints: [source],
    color: true,
    bundle: true,
    sourcemap: true,
    globalName,
    tsconfig: "./tsconfig.json",
    logLevel: "info",
};

(async () => {
    service = await startService();
    try {
        // Build code
        for (let output of outputs) {
            await service.build({
                ...buildData,
                ...output,
            });
        }
    } catch (e) {
        // OOPS! ERROR!
        console.error("Opps, something went wrong!", e);
    } finally {
        // We command you to stop. Will start again if files change.
        service.stop();
    }
})();

BTW, I am using pnpm workspaces, but that shouldn't affect the build, since pnpm syslinks all the workspaces and modules.

[evanw]

it logs this error for all import's

It's a warning, not an error, so the build will still succeed. It shouldn't stop you from using the resulting bundle.

Esbuild keeps saying "the bundle will always be undefined"

It looks like this is a problem with the @okikio/manager package, not with esbuild. This package has a browser field in its package.json file that points to a file without any exports. That means all imports from that file will be undefined at run-time when esbuild is targeting the browser.

It's not a problem with esbuild because other bundlers that follow the specification for the browser field will also turn the imports into undefined (e.g. Parcel). The browser field is supposed to point to a module in ESM or CommonJS format with exports for a bundler. This warning you are referring to exists because esbuild is trying to call your attention to the problem so you don't accidentally ship the likely-broken bundle.

This can either be addressed by fixing the package, or by telling esbuild to ignore the browser field in package.json files by adding the mainFields: ['module', 'main'] esbuild setting to your browser builds. It's much better to get the package fixed though because disabling the browser field could break other packages that use the field correctly and rely on it.

[okikio]

So to fix this problem I need to specify an ESM file in the browser field instead of an IIFE.

Edit: The browser field was the problem, thanks. If possible please add links to the documentation on how the package.json fields work to the esbuild documentation as others might run into the same issue in the future. It seems I misunderstood how the browser field worked during a change tp the package.json I ended up breaking a lot of things.