Vite optimization problem in inertia starter.

[AshlinR]

I am having trouble with the inertia starter kit using vue3. The vite optimization fails.

The build fails whenever I have a broken import or a non async vue component. I guess vite runs across the broken import and crashes. While this is obviously due to problems in my code it's very annoying that the error message doesn't tell me where the errror is. This means I have to work through adding/removing components to locate the error.

Can someone suggest a way to deal with this?

The error presents like this:

started HTTP server on localhost:3333
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/lucid/build/services/db.js:16:0:
  16 │ await app.booted(async () => {
     ╵ ~~~~~

X [ERROR] Could not resolve "@libsql/sqlite3"

node_modules/@adonisjs/lucid/build/src/clients/libsql.cjs:5:23:
  5 │         return require('@libsql/sqlite3');
    ╵                        ~~~~~~~~~~~~~~~~~

You can mark the path "@libsql/sqlite3" as external to exclude it from the bundle, which will
remove this error and leave the unresolved path in the bundle. You can also surround this
"require" call with a try/catch block to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "oracledb"

node_modules/knex-dynamic-connection/build/src/dialects/oracledb.js:24:29:
  24 │     const oracledb = require('oracledb');
     │                              ~~~~~~~~~~
     ╵                              "./oracledb"

Use the relative path "./oracledb" to reference the file
"node_modules/knex-dynamic-connection/build/src/dialects/oracledb.js". Without the leading "./",
the path "oracledb" is being interpreted as a package path instead.

[RomainLanz]

Hey @AshlinR! 👋🏻

It looks like you are importing backend code inside your frontend codebase.

The best solution would be to share a repository with the minimum amount of code needed to reproduce the issue.

[AshlinR]

Thanks, I found the problem. I had been instantiating a model class in some of the vue files.

Is it safe to import the model classes as Types for the frontend code?

e.g. in frontend file

import type BigModel from models/BigModel

[RomainLanz]

Yes, all good to use import type 👍🏻

[koirherianto]

thankyu

[BoukaryDiallo]

Thanks @AshlinR @RomainLanz . I had the exact same problem but after typing all my class imports (import type Product from '#models/products') in my vue components everything works great.