build fails with top level await

[TheLudd]

I have a top level await in a file that I import in a route. I only use the awaited value in the loader, I.e on the backend side.
This works well in dev mode but when I build the app, the build fails.
The client build passes but the server build fails saying:

Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)

I find this a bit strange since the server build should not be for these environments.

Is there any way I can configure myself out of this or is this a bug?

Here is an example of a route that will replicate the error: (work in dev, fail to build)

import { readdir } from 'node:fs/promises'
import type { Route } from './+types/_index'

const dirs = await readdir('/')
export const loader = () => dirs

export default function Index({ loaderData }: Route.ComponentProps) {
  return (
    <ul>
      {loaderData.map((dirname) => (
        <li key={dirname}>{dirname}</li>
      ))}
    </ul>
  )
}

[andriygm]

You could target esnext for only the SSR build (client build will still target modern browsers) with something like this in yourvite.config.ts:

export default defineConfig(({ isSsrBuild }) => ({
  plugins: [reactRouter(), tsconfigPaths()],
  build: {
    target: isSsrBuild ? "esnext" : undefined,
  },
}));

Theoretically, transpiling to different targets between the server and client should still produce the same DOM output, so the risk of hydration mismatch is probably little to none, but it's probably still safer to maintain the same build target between client and server:

export default defineConfig({
  plugins: [reactRouter(), tsconfigPaths()],
  build: {
    target: "esnext",
  },
});

But here browser support could become an issue. I would lean towards the first option if you have to, but have not tested this extensively so 🤷‍♂️

Also, check out this reply: remix-run/remix#7969 (comment)

[TheLudd]

Thank you. I did discover that I could use the esnext for all solution but nice to know how to separate between client and server.