vite build error -- Transform failed with 3 errors - Top-level await is not available in the configured target environment

[cliffordfajardo]

What version of Remix are you using?

2.2.0

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

app-config.ts

const getValue = async () => return 1;

export const some_value = await getValue()

server.ts

import {some_value} from './app-config.ts`

Then run npm run build

 195 modules transformed.
[vite:esbuild-transpile] Transform failed with 3 errors:
index.js:42:0: ERROR: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 3 overrides)
index.js:54:0: ERROR: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 3 overrides)
index.js:66:0: ERROR: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 3 overrides)

Expected Behavior

remix's vite plugin should detect the tsconfig.json settings that a user has in their remix project.
I have "target": "ES2022", in my tsconfig.json but its not being used for the build step 🤔

[cliffordfajardo]

I was able to solve this by adding this to my vite.config.ts file:

export default defineConfig({
  plugins: [
    remix({
      // appDirectory: "app",
      // assetsBuildDirectory: "public/build",
      // serverBuildPath: "build/index.js",
      // publicPath: "/build/",
      serverModuleFormat: "esm",
      ignoredRouteFiles: ["**/.*"],
      routes(defineRoutes) {
        return Promise.resolve(createRoutesFromFolders(defineRoutes));
      },
    }),
    tsconfigPaths(),
  ],
  build: {
    target: "ES2022" // <--------- ✅✅✅✅✅✅
  },
});

I used the ES2022 target value from my tsconfig.json file:

{
  "include": ["env.d.ts", "**/*.ts", "**/*.tsx"],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
    "target": "ES2022",  // <--------- ✅✅✅✅✅✅
    "module": "ES2022",
    "strict": true,
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"]
    },

    // Remix takes care of building everything in `remix build`.
    "noEmit": true
  }
}

References

• vite discussion: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1") vitejs/vite#6985

@pcattori @markdalgleish - maybe the remix vite plugin should use tsconfig settings a user has?

[cliffordfajardo]

The error message referenced firefox78, so I did a grep in node_modules folder for that string and saw it came from vite

cd node_modules
grep -r "firefox78"

./vite/dist/node/constants.js:    'firefox78',

then that gave me an indication it was coming from vite. But I should have probably known that since this error happens when calling npm run build 😄

package.json

"build": "vite build && vite build --ssr",

Then I did a google search for the error: vite Top-level await is not available in the configured target environment
and it was nice seeing vite community provide answers 🙏

[markdalgleish]

Thanks for raising this.

This is strictly a Vite concern. We're wanting to keep Remix decoupled from your Vite config as much as possible, and this is a good example of something that you're free to configure yourself. If you want your Vite config to automatically sync with your tsconfig, this could be implemented as its own Vite plugin outside of Remix.

[SpencerDuball]

Just ran into this error with remix@2.5.1 while deploying with SST. The fix that worked for me was to set:

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

[vmaubert]

Hi.

Can we have a build target for the server bundle and another one for the client bundle?
I need a top-await during the startup, and I don’t want to set target: esnext for the browsers…

Thx!

[cliffordfajardo]

@vmaubert - you can try using the following fields to play around with the server and client builds:

In vite.config.ts's remix plugin, you can pass serverModuleFormat: "esm", similar to this:

export default defineConfig({
  plugins: [
    remix({
      // ⬇️ The output format of the server build. Defaults to "esm".
      serverModuleFormat: "esm",
      ignoredRouteFiles: ["**/.*"],
    }),
    tsconfigPaths(),
  ],
  build: {
    target: "ES2022",
  },
});

For anyone reading this using esbuild & not vite with remix, my recommendations:

1. upgrade to vite
2. reference older version of remix docs as some properties you pass to the remix vite plugin are named differently than the values you pass to the remix.config.js file
   • For example: serverBuildTarget existed in remix v1: https://github.com/remix-run/remix/pull/5635/files
3. Reference the Remix Changelog and do COMMAND+F search for related keywords for API changes/renames
   • https://github.com/remix-run/remix/blob/main/CHANGELOG.md

Testing settings

If you want to play around with the settings, probably best to spin up a quick remix project using the CLI to test the settings

# create fresh remix app
npx create-remix --template remix-run/remix/templates/vite-express

# build the app
npm run build

ls build
client server

With vite, whats nice is the the client & server build are clearly separated once you build the app:

[cliffordfajardo]

@vmaubert - i created a new remix discussion here since I still do find the serverModuleFormat and build top level vite options confusing

Would be good to get your input 🙏
Github Discussion: #8856

[luzat]

@vmaubert Selecting a different build target the server build (SSR) seems to work like that:

export default defineConfig(({ isSsrBuild }) => ({
  plugins: [
    remix(),
    tsconfigPaths(),
  ],
  build: isSsrBuild ? { target: 'ES2022' } : {},
}))

This allows me to use top-level await in server code while not messing with browser code.