plugin:vite:import-analysis - Failed to parse source for import analysis because the content contains invalid JS syntax. - Vue 3

Question

I've updated my project from Vite 2.x to Vite 3.0.2 and suddenly i got this error:

[plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.

/Volumes/Disk/Web/wce-system/src/i18n.js:51:20

There's nothing wrong in i18n.js file as it was working fine with Vite 2.x but im putting codes in here just in case you need:

import { nextTick } from "vue"
import { createI18n } from "vue-i18n"
import axios from "axios"
import tr from "@/locales/tr.json"
import en from "@/locales/en.json"

export const SUPPORT_LOCALES = ["tr", "en"]

export function setupI18n(options = { locale: "tr" }) {
const i18n = createI18n(options)
setI18nLanguage(i18n, options.locale)
  return i18n
}

export function setI18nLanguage(i18n, locale, url) {
  if (i18n.mode === "legacy") {
  i18n.global.locale = locale
} else {
  i18n.global.locale.value = locale
}       
axios.defaults.headers.common["Accept-Language"] = locale
document.querySelector("html").setAttribute("lang", locale)
}

export async function loadLocaleMessages(i18n, locale) {
 const messages = await import(
/* webpackChunkName: "locale-[request]" */ `./locales/${locale}.json`
)

i18n.global.setLocaleMessage(locale, messages.default)
 return nextTick()
}

const i18n = createI18n({
  legacy: false,
  locale: "tr",
  fallbackLocale: "tr",
  globalInjection: true,
  messages: {
    tr,
    en,
  },
})

export default i18n

Answer 1

So i figured it out. This line:

const messages = await import(
  /* webpackChunkName: "locale-[request]" */ `./locales/${locale}.json`
)

should have been:

 const messages = await import(`./locales/${locale}.json`)

I cant explain why it is so but im leaving links below about issue.

Vite dynamic imports

This may help for further investigation