Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

Failed to parse source for import analysis because the content contains invalid JS syntax.

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
like image 881
Kayahan Kahrıman Avatar asked Sep 03 '25 13:09

Kayahan Kahrıman


2 Answers

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

like image 87
Kayahan Kahrıman Avatar answered Sep 05 '25 04:09

Kayahan Kahrıman


I had same error and fixed like this:

Change file format from .js to .jsx.

like image 24
Özkan KIZIL Avatar answered Sep 05 '25 03:09

Özkan KIZIL