SyntaxError: Need to install with `app.use` function

leecho commented 1 year ago

Environment

Operating System: Darwin
Node Version: v16.20.2
Nuxt Version: 3.0.0-rc.11
Nitro Version: 0.5.4
Package Manager: yarn@1.22.19
Builder: vite
User Config: -
Runtime Modules: -
Build Modules: -
"@nuxtjs/i18n": "8.0.0-rc.5",

Reproduction

null

Describe the bug

nuxt.config.ts

import { getEnvConfig } from './nuxt/env'
const envConfig = getEnvConfig()
export default defineNuxtConfig({
    css: [
        'element-plus/theme-chalk/dark/css-vars.css',
        '@/assets/styles/index.scss'
    ],
    modules: [
        '@pinia/nuxt',
        '@nuxtjs/tailwindcss',
        '@nuxtjs/i18n',
        '@nuxtjs/color-mode'
    ],
    app: {
        baseURL: envConfig.baseUrl
    },
    runtimeConfig: {
        public: {
            ...envConfig
        }
    },
    ssr: !!envConfig.ssr,
    i18n: {
        vueI18n: './i18n.config.ts'
    }
})

i18n.config.ts

export default defineI18nConfig(() => ({
    globalInjection: true,
    strategy: 'prefix',
    langDir: 'locales',
    locales: [
        {
            code: 'en',
            iso: 'en-US',
            file: 'en.ts'
        },
        {
            code: 'zh',
            iso: 'zh-CN',
            file: 'zh.ts'
        }
    ],
    useCookie: true,
    defaultLocale: 'zh',
    detectBrowserLanguage: {
        useCookie: true,
        cookieKey: 'i18n_redirected',
        redirectOn: 'root'
    }
}))

language.vue


<template>
    <div>
        <nuxt-link
            v-for="locale in availableLocales"
            :key="locale.code"
            :to="switchLocalePath(locale.code)"
            >{{ locale.name }}
        </nuxt-link>
    </div>
</template>
<script setup lang="ts">
const { locale, locales } = useI18n()
const switchLocalePath = useSwitchLocalePath()

const availableLocales = computed(() => {
    return locales.value.filter((i) => i.code !== locale.value)
})
</script>

Additional context

No response

Logs

runtime-core.esm-bundler.js:561  SyntaxError: Need to install with `app.use` function (at message-compiler.mjs:77:19)
    at createCompileError (message-compiler.mjs:77:19)
    at createI18nError (vue-i18n.mjs?v=f3adf6ba:101:12)
    at useI18n (vue-i18n.mjs?v=f3adf6ba:2299:15)
    at setup (language.vue?t=1699331923050:10:33)
    at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)
    at setupStatefulComponent (runtime-core.esm-bundler.js:7204:29)
    at setupComponent (runtime-core.esm-bundler.js:7159:11)
    at mountComponent (runtime-core.esm-bundler.js:5508:13)
    at processComponent (runtime-core.esm-bundler.js:5483:17)
    at patch (runtime-core.esm-bundler.js:5085:21)

github-actions[bot] commented 1 year ago

Would you be able to provide a reproduction? 🙏

More info

### Why do I need to provide a reproduction? Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making. ### What will happen? If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect. If `needs reproduction` labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it. ### How can I create a reproduction? We have a couple of templates for starting with a minimal reproduction: 👉 [Reproduction starter (v8 and higher)](https://stackblitz.com/fork/github/BobbieGoede/nuxt-i18n-starter/tree/v8) 👉 [Reproduction starter (edge)](https://stackblitz.com/fork/github/BobbieGoede/nuxt-i18n-starter/tree/edge) A public GitHub repository is also perfect. 👌 Please ensure that the reproduction is as **minimal** as possible. See more details [in our guide](https://nuxt.com/docs/community/reporting-bugs/#create-a-minimal-reproduction). You might also find these other articles interesting and/or helpful: - [The Importance of Reproductions](https://antfu.me/posts/why-reproductions-are-required) - [How to Generate a Minimal, Complete, and Verifiable Example](https://stackoverflow.com/help/mcve)

kazupon commented 12 months ago

close due to in-activity. if you are having still issue, please you would open as new issue. thank you!

nuxt-modules / i18n