define cannot be used with indexed accessors

[fwouts]

I like to use TypeScript with all strictness checks turned on. One of them is noPropertyAccessFromIndexSignature which forces indexed types such as { [key: string]: string } to be used with element access expressions, and not property access expressions.

For example, I cannot write process.env.FOO, I must write process.env["FOO"] or TypeScript will complain.

This doesn't play well with define, as it only replaces property access expressions and not element access expressions.

Here's an example config:

const { build } = require("esbuild");

build({
  entryPoints: ["./src/main.ts"],
  minify: false,
  bundle: true,
  outfile: "./dist/main.js",
  platform: "node",
  define: {
    "process.env.FOO": JSON.stringify("Hello, World!"),
  },
}).catch((err) => {
  console.error(err);
  process.exit(1);
});

This will not replace the expression process.env["FOO"], so it will still appear as is in the output bundle.

I tried also using:

  define: {
    'process.env["FOO"]': JSON.stringify("Hello, World!"),
  },

but esbuild doesn't like it:

error: The define key "process.env[\"FOO\"]" contains invalid identifier "env[\"FOO\"]"

I've created a repository that reproduces this issue: https://github.com/fwouts/esbuild-process-env-define

Obviously, the workaround is to disable noPropertyAccessFromIndexSignature in tsconfig.json, which is precisely what I'm planning to do for now.

However, I figure this could be a gotcha for those who tend to use both process.env["FOO"] and process.env.FOO interchangeably, especially if they're migrating from webpack (which does seem to handle both with DefinePlugin).

Would this be considered a bug?

I'd be happy to try making a PR for this if that helps :)

[fwouts]

That was fast. Thank you @evanw!!