Server Side Top Level Await does not work

[joshocalico]

What version of Remix are you using?

Latest (1.7.1)

Steps to Reproduce

Use this export in any loader or server file.

// My awesome computed function
const myPromise = new Promise((resolve) => {
    resolve("Hello Async");
});

const myResult = await myPromise;

export { myResult };

Note: this doesn't apply to client side Javascript/Typescript as Remix rightfully respects the tsconfig / jsconfig.

Expected Behavior

It will evaluate the promise inside the module while it is being imported.

Actual Behavior

The app doesn't build.

> remix build

Building Remix app in production mode...

✘ [ERROR] Top-level await is not available in the configured target environment ("node14")

    app/webapp.config.server.ts:91:22:
      91 │ export const colors = await getColors();
         ╵                       ~~~~~


Build failed with 1 error:
app/webapp.config.server.ts:91:22: ERROR: Top-level await is not available in the configured target environment ("node14")
Error
    at Object.onBuildFailure (/Users/joshuasteele/fluidity/fluidity-app/web/app.fluidity.money/node_modules/@remix-run/dev/dist/cli/commands.js:183:13)
    at buildEverything (/Users/joshuasteele/fluidity/fluidity-app/web/app.fluidity.money/node_modules/@remix-run/dev/dist/compiler.js:282:13)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Object.build (/Users/joshuasteele/fluidity/fluidity-app/web/app.fluidity.money/node_modules/@remix-run/dev/dist/compiler.js:102:3)
    at async Object.build (/Users/joshuasteele/fluidity/fluidity-app/web/app.fluidity.money/node_modules/@remix-run/dev/dist/cli/commands.js:178:3)
    at async Object.run (/Users/joshuasteele/fluidity/fluidity-app/web/app.fluidity.money/node_modules/@remix-run/dev/dist/cli/run.js:496:7)
ERROR: "build:remix" exited with 1.

[machour]

The error message seems quite self-explanatory: top level await are not available for node14.
Can you try with node16 or maybe node14.14 (see evanw/esbuild#253 (comment))?

[joshocalico]

Problem is largely here, remix build doesn't allow you to configure any other target.
For my other non-remix related server things it works fine - I'm using target node16 in my own esbuild builds.

I'll reference the two files responsible.

remix/packages/remix-dev/build.ts

Lines 15 to 20 in 42fb183

	export enum BuildTarget {
	Browser = "browser", // TODO: remove
	Server = "server", // TODO: remove
	CloudflareWorkers = "cloudflare-workers",
	Node14 = "node14",
	}

remix/packages/remix-dev/compiler.ts

Line 75 in b35e135

target = BuildTarget.Node14,

remix/packages/remix-dev/compiler.ts

Line 105 in b35e135

target = BuildTarget.Node14,

I've thrown together a fork which bumps every reference to >= Node 14 to >= Node 14.8 and it seems to be working. The large problem is the actual ESBuild target used by Remix isn't configurable.

[joshocalico]

I'll admit this is a bit of a bandaid solution as it just bumps the Node requirement and the ESBuild target. Would it make more sense to expose the ESBuild options to the remix configuration file? We're going to keep having these problems otherwise as javascript syntax changes.

[machour]

I'm failing to see the issue here @joshocalico: If you want to be able to use TLA in your project, then you need to make sure you run it on a compatible node version. What am I missing?

Opening the esbuild configuration to user land is a different topic, I think there's an open discussion about it.

[joshocalico]

@machour I think it'd be a bit obvious from what I've posted and the code quoted.
I'm running Node 16 - this issue irrelevant to my runtime. Remix is hard coded to bundle against Node 14's spec internally - the bundler fails to run against my code as Remix's compiler always targets base Node 14 with no method of configuration. Top level await support was added in Node 14.8.
Glad to hear opening up ESBuild configuration is on the long term agenda.

[jgentes]

Would be great to have more modern Node support from Remix. Any update @machour?

[machour]

@jgentes someone from the Remix team will eventually pick this up, I'm just volunteering for triage.

[jgentes]

I think this may have been addressed by #4034?

[machour]

@mcansh is that the case?

[mcansh]

not that i know of, esbuild's target is still node14, so while typescript will be okay with it, esbuild will still throw

[machour]

Converting this to a Proposal discussion, as per our Development Process.