vite build runs fine but not vite

[sroussey]

vite build runs fine but not vite

❯ npx vite

  VITE v5.2.7  ready in 87 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
✘ [ERROR] Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)

❯ npx vite build
vite v5.2.7 building for production...
✓ 292 modules transformed.
dist/index.html                     0.37 kB │ gzip:   0.25 kB
dist/assets/index-B7htw0M7.css     22.61 kB │ gzip:   4.89 kB
dist/assets/index-BIdeRwYj.js   2,590.93 kB │ gzip: 775.22 kB

(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
✓ built in 2.55s

vite.config.js:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  esbuild: {
    target: "esnext",
  },
  build: {
    target: "esnext",
  },
});

with debug:

...
vite:config   esbuild: { jsxDev: true, target: 'esnext', jsx: 'automatic' },
  vite:config   build: {
  vite:config     target: 'esnext',
  vite:config     cssTarget: 'esnext',
...

showing esnext is getting picked up.

[sroussey]

After digging a bit, I found this will fix it:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  esbuild: {
    target: "esnext",
  },
  build: {
    target: "esnext",
  },
  optimizeDeps: {
    esbuildOptions: {
      target: "esnext",
    },
  },
});

Seems like esbuild target is not being propagated?