Remix Vite Top-level await is not available in the configured target environment

[SpencerDuball]

After upgrading to Remix with Vite I was getting this error:

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

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

There are a few answers out there that suggest updating the TSConfig target to "ESNext" but this probably will affect the output client bundle and cause issues for people with older browsers. Instead I found this solution:

export default defineConfig({
  server: { port: 3000 },
  plugins: [remix(), tsconfigPaths()],
  optimizeDeps: { esbuildOptions: { target: "esnext" } }, // <-- Set this to resolve issue.
});

Got this solution from: mozilla/pdf.js#17245

[SpencerDuball]

Added for documentation purposes only, not an active issue.

[castarco]

What would be the solution for the case of Astro? (as opposed to NextJS)

[SpencerDuball]

I actually have not used Astro so I am not familiar, also this fix was for Remix (not NextJS) so I am not familiar with that framework either. But the general concept is that you should set the server bundle to ESNext. If you set the browser bundle, you may limit the site to be compatible to folks with only the latest browsers. Since you control the server however, you may support the latest standard.

[castarco]

Thank you @SpencerDuball , I still didn't manage to do that, but it's a good point. Knowing that there must be some way to configure the server bundling on its own is a helpful indication.