Top-level await is not available (using inertia starter kit)

[PauloPereira87]

I'm using the Inertia Starter Kit (with Vue).

When running 'npm run dev' I get the following errors:

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

node_modules/@adonisjs/core/build/services/hash.js:15:0:
  15 │ await app.booted(async () => {
     ╵ ~~~~~

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

node_modules/@adonisjs/ace/build/index.js:881:2:
  881 │   await readFile(new URL("./command_metadata_schema.json", schemaRoot), "utf8")
      ╵   ~~~~~

And when trying to load a Inertia route, I the app crashes:

\node_modules\esbuild\lib\main.js:1651
let error = new Error(text);
^

Error: Build failed with 2 errors:
node_modules/@adonisjs/ace/build/index.js:881:2: ERROR: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)
node_modules/@adonisjs/core/build/services/hash.js:15:0: ERROR: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)
at failureErrorWithLog (\node_modules\esbuild\lib\main.js:1651:15)
at \node_modules\esbuild\lib\main.js:1059:25
at \node_modules\esbuild\lib\main.js:1527:9
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
errors: [Getter/Setter],
warnings: [Getter/Setter]
}

Node.js v20.11.1

Note: the 'npm run lint' and the 'npm run build' runs without any errors.

[Julien-R44]

logs you see are produced by Vite. Look at what Vite is trying to compile: some backend/Adonis code.
So you are importing Adonis code into your frontend. That means you will bundle your backend with your frontend. I guess this is not what you want.

If you're importing Adonis code into your frontend, I guess it's probably to share some typing. In this case, don't forget to use import type rather than import

[salman3001]

i had the same error. i imported backend models for type hinting. i was also wondering if they will be included in the bundle or not.

but i added this code to vite config. which removed the error.

  build: {
    target: 'esnext',
  },
  esbuild: {
    target: 'esnext',
    supported: {
      'top-level-await': true,
    },
  },
  optimizeDeps: {
    esbuildOptions: {
      target: 'esnext',
    },
  },

[feryardiant]

Thank you @salman3001

in my case it solve just by adding these lines

optimizeDeps: {
  esbuildOptions: {
    target: 'esnext',
  },
},