CODEWITHSUNDEEP
javascriptvuejs3vite
Kayahan Kahrıman
Kayahan Kahrıman

Reputation: 618

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

Upvotes: 27

Views: 120133

Answers (9)

Özkan KIZIL
Özkan KIZIL

Reputation: 61

I had same error and fixed like this:

Change file format from .js to .jsx.

Upvotes: 6

JJAHMEDAMER
JJAHMEDAMER

Reputation: 231

I got the same when I used .tsx instead of .jsx lol. So I fixed the extension

Upvotes: -1

felix mutai
felix mutai

Reputation: 15

Install vue with npm install Then run your build using npm run build

Upvotes: -3

pasx
pasx

Reputation: 2975

I found this misleading error because of a simple syntax error in a JavaScript file part of a TypeScript React app:

import { Foo } from 'baz';

export class MyClass{
    static myFunc() {
        return ...;
    //} <- missing curly brace here
}

Adding the missing brace fixed the issue.

Upvotes: 3

suspectus
suspectus

Reputation: 17258

During migration to Vue3, my issue was not including the Vite @vite-js/plugin-vue plugin in vite.config.js. This is needed for Vite to support Vue Single-File Components (SFCs).

// vite.config.js
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
     vue()
  ],
}

@vitejs/plugin-vue repo

Upvotes: 3

user1069000
user1069000

Reputation: 11

make sure all following files are in your project root.

svelte.config.js
tsconfig.json
tsconfig.node.json
vite.config.ts

Upvotes: 1

AlbertE
AlbertE

Reputation: 21

I've got this particular error after migrate from vue CLI to vite.

"Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files."

I googled and I found a lot of remarks and some solutions but none are available in my case. And then after a long times , I look in my IDE and it dispaly a topic " remove the uncessary parentheses" and then after removing the uncessary parenthesis all was fine.

In my code I've write

export default ({ .. some code });

after removing the () the error disappear.

export default { .. some code };

Have a nice day

Upvotes: 1

TinMan
TinMan

Reputation: 29

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

Upvotes: 0

Kayahan Kahrıman
Kayahan Kahrıman

Reputation: 618

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

Upvotes: 11

Related Questions