Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SyntaxError: Need to install with app.use #1874

Open
martinszeltins opened this issue Jun 13, 2024 · 4 comments
Open

SyntaxError: Need to install with app.use #1874

martinszeltins opened this issue Jun 13, 2024 · 4 comments
Labels
Status: Review Needed Request for review comments

Comments

@martinszeltins
Copy link

Reporting a bug?

When I try to use a translation, I get this error:

vue-i18n.js?v=bd326320:278 Uncaught (in promise) SyntaxError: Need to install with `app.use` function (at vue-i18n.js?v=bd326320:278:17)
    at createCompileError (vue-i18n.js?v=bd326320:278:17)
    at createI18nError (vue-i18n.js?v=bd326320:3650:10)
    at useI18n (vue-i18n.js?v=bd326320:5439:11)
    at setup (MyNotification.vue:11:19)
    at callWithErrorHandling (chunk-U6BEPC57.js?v=bd326320:1659:19)
    at setupStatefulComponent (chunk-U6BEPC57.js?v=bd326320:9073:25)
    at setupComponent (chunk-U6BEPC57.js?v=bd326320:9034:36)
    at mountComponent (chunk-U6BEPC57.js?v=bd326320:7363:7)
    at processComponent (chunk-U6BEPC57.js?v=bd326320:7329:9)
    at patch (chunk-U6BEPC57.js?v=bd326320:6795:11)

main.ts

import App from './App.vue'
import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
    legacy: false,
    locale: 'en',
    fallbackLocale: 'en',
    messages: {
      en: {
          hello: 'hello world'
      },
    }
})

const app = createApp(App)

app.use(i18n)
app.mount('#app')

App.vue

<template>
    <div>
        <button @click="showNotification">
            Show Notification
        </button>
    </div>
</template>

<script setup lang="ts">
    import { h } from 'vue'
    import { toast } from 'vue3-toastify'
    import "vue3-toastify/dist/index.css"
    import MyNotification from './components/MyNotification.vue'

    const showNotification = () => {
        const vnode = h(MyNotification)

        toast(vnode, {
            type: 'info',
            closeOnClick: true,
            autoClose: false,
            hideProgressBar: true,
            position: toast.POSITION.TOP_CENTER,
        })
    }
</script>

components/MyNotification.vue

<template>
    <div>
        {{ message }}
    </div>
</template>

<script setup lang="ts">
    import { computed } from 'vue'
    import { useI18n } from 'vue-i18n'

    const { t } = useI18n()

    const message = computed(() => t('hello'))
</script>

Please see the reproduction link.

Expected behavior

It should work without errors.

Reproduction

https://stackblitz.com/edit/github-o1kzje?file=src%2Fcomponents%2FMyNotification.vue

System Info

`
  System:
    OS: Linux 6.5 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-1260P
    Memory: 13.11 GB / 31.05 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 18.14.2 - ~/.nvm/versions/node/v18.14.2/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.5.0 - ~/.nvm/versions/node/v18.14.2/bin/npm
    pnpm: 8.6.12 - /usr/local/bin/pnpm
    bun: 1.0.33 - ~/.bun/bin/bun
  Browsers:
    Chrome: 125.0.6422.60


### Screenshot

![image](https://github.com/intlify/vue-i18n/assets/34019878/734d195c-f532-4b24-945f-12dbf0bf9e8d)


### Additional context

_No response_

### Validations

- [X] Read the [Contributing Guidelines](https://github.com/intlify/vue-i18n/blob/master/.github/CONTRIBUTING.md)
- [X] Read the [Documentation](https://vue-i18n.intlify.dev/)
- [X] Check that there isn't [already an issue](https://github.com/intlify/vue-i18n/issues) that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussions](https://github.com/intlify/vue-i18n/discussions)
@martinszeltins martinszeltins added the Status: Review Needed Request for review comments label Jun 13, 2024
@lsewcx
Copy link

lsewcx commented Jul 12, 2024

我也有同样的问题,到现在都没有解决,只能放弃这组件

@oleksandr-okuniev-onix
Copy link

Have the same error when using https://vue-tippy.netlify.app/props#content where also using h render function

@Alfred-wen
Copy link

在tsx 的setup 中使用,也会有这个问题。

@Briscer
Copy link

Briscer commented Sep 20, 2024

I use @nuxtjs/i18n with monaco-editor, When I used [email protected], it worked well, but when I upgraded monaco-editor to 0.52.0, the same error occurred, and I don't know which side is the cause.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Review Needed Request for review comments
Projects
None yet
Development

No branches or pull requests

5 participants