Allow server side Top Level Await

[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.

[anthonywebb]

We could benefit from targeting a more recent version of node as well. Hopefully this will be picked up quickly.

[mcansh]

give the original posting an "up vote" and it will end up higher on our list when we go looking for new things to add to the roadmap :)

[derekr]

Upvoted as well. Not sure if there is a new work around or update since Feb, but this is preventing full use of remix using something like https://sst.dev.

https://discord.com/channels/983865673656705025/1098809540075593758

I've tried a few things like setting https://remix.run/docs/en/1.15.0/file-conventions/remix-config#servermoduleformat, but still getting the top level await error:

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

    ../node_modules/.pnpm/[email protected]/node_modules/sst/node/util/index.js:15:21:
      15 │ const _placeholder = await parseEnvironment();
         ╵   

[Ankcorn]

I'm bumping into this too with sst.dev, if anyone has a workaround that would be super!

[derekr]

@Ankcorn the SST docs suggest setting resource names as environment variables in your RemixSite construct. This has been a solid enough approach for me atm since you're mostly interfacing with other SST constructs/AWS resources that accept the target resource name as input and not much else.

https://docs.sst.dev/constructs/RemixSite#environment-variables

[rajeshpillai]

Do we still have this issue as we are using elasticsearch npm package in remix which internally uses undici package(which internally uses worker_threads.js (jspm core module ), I suppose which uses top level awaits).

In short we are not able to deploy the app via docker as top level await error gets thrown. Kind of blocker for me.

Is there a way I can fix this temporarily so that we can use this library? Is there any way to make remix use latest node engine (if I am getting it right)

We are using remix with express server.

I am very sorry, as this is my first post? (or is there any other place where this discussion is open)

@joshocalico Do you have your solution uploaded anywhere so that I can take a look?

Or am I missing something here? Please do point me to the right place if this is not the right forum for this discussion as we need to go live with the application.

[derekr]

What does your patch look like? Setting a newer node engine in the relevant remix module package.json?

[rajeshpillai]

Hey, I will update as some issue facing again. I will confirm and revert back.

[rajeshpillai]

Finally got it working on local and docker (top level await is working). Will update if any issue.

Here is the tsconfig.json
target": "ES2022",
"module": "ESNext",
"moduleResolution": "node",

What we did is installed npm "patch-package" and setup postinstall hook for patch-package.

We patched the code locally in the node_modules folder at
diff --git a/node_modules/@remix-run/dev/dist/compiler/server/compiler.js b/node_modules/@remix-run/dev/dist/compiler/server/compiler.js

and changed target from node14 to node18

Then run the patch-package for the above module

npx patch-package @remix-run/dev

Then run npm i and it will patch the the code.

In remix.config.js (or ts) add the serverModuleFormat to "esm"
serverModuleFormat: "esm",

For docker don't forget to copy patches folder and then run npm install to make it work.

The patch is shown below

diff --git a/node_modules/@remix-run/dev/dist/compiler/server/compiler.js b/node_modules/@remix-run/dev/dist/compiler/server/compiler.js
index 3a3a48a..fad43b9 100644
--- a/node_modules/@remix-run/dev/dist/compiler/server/compiler.js
+++ b/node_modules/@remix-run/dev/dist/compiler/server/compiler.js
@@ -92,7 +92,7 @@ const createEsbuildConfig = (ctx, channels) => {
     minifySyntax: true,
     minify: ctx.options.mode === "production" && ctx.config.serverMinify,
     mainFields: ctx.config.serverMainFields,
-    target: "node14",
+    target: "node18",
     loader: loaders.loaders,
     bundle: true,
     logLevel: "silent",

[mauscoelho]

@rajeshpillai does the patch-package still work for you? I see that RemixSite construct do no allow anymore to use "esm"

Error: RemixSite: remix.config.js "serverModuleFormat" must be "cjs".

[cliffordfajardo]

Just wanted to give an update
If you upgrade to NodeJS 18+ this should be fixed here: #7292

[MichaelDeBoey]

This will be fixed once #7291 is merged

[MichaelDeBoey]

Closed by #7292

[cliffordfajardo]

I also got this error when upgrading to remix to use vite.
Solution is in this issue / thread I created below:
#7969