12

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
Kayahan Kahrıman
  • 388
  • 1
  • 4
  • 14
  • I got this error because I moved my index.html file into a subfolder. It HAS to be in the root, even though the documentation says you can build a subdirectory. I have found that to be false. – Richard May 18 '23 at 09:02

3 Answers3

6

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

Kayahan Kahrıman
  • 388
  • 1
  • 4
  • 14
1

For anyone getting this exact same error with SvelteKit (+server.page for example), the issue can be a syntax problem elsewhere in the code - so do as above and strip the code back, building it up until you can identify it

TinMan
  • 31
  • 2
  • 1
    As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 18 '23 at 14:12
  • 1
    So the problem is that there is a problem somewhere? Not sure how this is helpful – Moritz Ringler May 20 '23 at 07:36
1

The thing is Vite is strict the way you name your files and folders. make sure you start with capital letter when naming your files and folders, and use jsx file type in naming your files.

Example:

Components/Home/Home.jsx

Eze Valentine Ifeanyichukwu
  • 31
  • 3