intlify / vue-i18n-extensions Goto Github PK

• vue-loader v15 later
• vue-cli v3 ref: https://github.com/kazupon/vue-i18n/blob/dev/examples/perf/compiler/vue.config.js

Need add babel-runtime dependency to package.json or make plugin work without it.

In lib/util.js at line:7

var _stringify = require('babel-runtime/core-js/json/stringify');

Hi !

I am testing a Nuxt static generated app on Vercel. This app uses nuxt-i18n which is using vue-i18n-extensions

After dependencies installation, when vercel run npm run generate I get the following error :

17:15:43.695 | > [email protected] generate /vercel/61f2f93f
-- | --
17:15:43.695 | > nuxt generate
17:15:44.407 | FATAL  Error parsing /vercel/61f2f93f/node_modules/vue-i18n-extensions/package.json: Unexpected token , in JSON at position 3089
17:15:44.407 | SyntaxError: Error parsing node_modules/vue-i18n-extensions/package.json: Unexpected token , in JSON at position 3089
17:15:44.407 | at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
17:15:44.418 | ╭──────────────────────────────────────────────────────────────────────────────────────╮
17:15:44.418 | │                                                                                      │
17:15:44.418 | │   ✖ Nuxt Fatal Error                                                                 │
17:15:44.418 | │                                                                                      │
17:15:44.418 | │   SyntaxError: Error parsing                                                         │
17:15:44.418 | │   /vercel/61f2f93f/node_modules/vue-i18n-extensions/package.json: Unexpected token   │
17:15:44.418 | │   , in JSON at position 3089                                                         │
17:15:44.418 | │                                                                                      │
17:15:44.418 | ╰──────────────────────────────────────────────────────────────────────────────────────╯
17:15:44.432 | npm ERR! code ELIFECYCLE
17:15:44.432 | npm ERR! errno 1
17:15:44.433 | npm ERR! [email protected] generate: `nuxt generate`
17:15:44.433 | npm ERR! Exit status 1
17:15:44.433 | npm ERR!
17:15:44.433 | npm ERR! Failed at the [email protected] generate script.
17:15:44.433 | npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
17:15:44.440 | npm ERR! A complete log of this run can be found in:
17:15:44.440 | npm ERR!     /vercel/.npm/_logs/2020-09-04T15_15_44_434Z-debug.log
17:15:44.445 | Error: Command "npm run generate" exited with 1
17:15:47.471 | Done with "package.json"

Here are an overview of my app dependencies :

"dependencies": {
  3     "@nuxtjs/axios": "^5.12.2",
  4     "@nuxtjs/google-tag-manager": "^2.3.2",
  5     "@nuxtjs/sitemap": "^1.2.0",
 18     "nuxt": "^2.14.4",
 19     "nuxt-i18n": "^4.1.0",
 41   },

It's working in local and in other environments. Do you have some clues about this issue ?
Do you think it's related to Node version ?

Thanks 👍 !

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

This repository currently has no open or pending branches.

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Describe the bug

The following error occurs when t exported with useI18n is used as an alias:

<script>
import { useI18n } from 'vue-i18n'

export default {
    setup() {
      const { t: translation } = useI18n({
        locale: 'en',
        inheritLocale: false,
        messages: {
          en: {
            apple: 'no apples | one apple | {count} apples',
            banana: 'no bananas | {n} banana | {n} bananas',
            dessert: 'I eat @:{name}!'
          }
        }
      })
      return { translation }
    },
}
</script>

Reproduction

dd1273b

System Info

System:
    OS: macOS 13.6.6
    CPU: (10) arm64 Apple M1 Max
    Memory: 156.13 MB / 64.00 GB
    Shell: 5.9 - /bin/zsh

Used Package Manager

n/a

Additional context

not work for <script setup> , because, v-t does not transform for $setup.

you can see the SSR tab in vue playground
https://play.vuejs.org/#eNq9U11r2zAU/SuaGDiB2F6aPYyQlH1QWPewjXWwF784zrWjVpaEPtKA8X/flRQnbgkdYzD7wda9R+ceHft09INS2d4BXdKVqTRTlhiwTl0XgrVKaks6oqEmPam1bEmC0GTUcgZu5+/EuJ0yLCCmEJUUxpLWNGTtOSbJZ+Bckl9S8+2rZDoAOmJx/3rgmnSFIH5xV0kFS5JwWZUcCXvcscqjSJSHCwut4qUFXBGy2s2vuy6M6/tVjqtYvfJVO0lqqdNABanxzMmURODVEbjwwNdHZMPlpuQDMuAWEceEcpbsU7suKA4rKMmxscpHYuiMRofStlTZvZEC7Q3HKo4NU9AlCRVfG1zzxYLurFVmmedOqIcmq2SbD/338zcZ3ukGbJnN8y0z9tTLtBOWtZCBadONlo8GNI4uqB/So3soyuJxRM2aZ5JwhGIc9DdlGX6RJ9JK/GKPX0LNagezoV7toHq4UL83h3iK7xpQwR4KeurZUjdgY/vm7isc8P3UbOXWcUS/0PwBRnLnNUbYRye2KHuEC2pvg8NMND/NzcGCMMOhvNDgRsAH2z+9cPSz3EX2duSi3/M0Ms/CMiNbqJkI5FKA8L/336cHDgGFVKXj4TmmjCkJUZ1MB81/DNwZdDF0/roQPF/24YtvGmdq4Ql0KQz+8WgcejuLyRt8+pesnnn/b2r730MJq/4=

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

This packaged is pulled by nuxt-i18n, and #30 breaks my app because lookbehind assertions are not supported by many browsers. I'm not familiar with the context that regex is used in, but could another solution be found?

my translation key is: 'cart.ipn.add.new.button'

I use it like this

<span v-t="'cart.ipn.add.new.button'"></span>

but it does not get hit but the compilerModule since it returns true for this regex:

const ecmaKeywordsRE = new RegExp('\\b' + (
  'delete,typeof,instanceof,void,do,if,for,let,new,try,var,case,else,with,await,break,catch,class,const,' +
  'alert,eval,super,throw,while,yield,delete,export,import,return,switch,default,' +
  'extends,finally,continue,debugger,function,arguments'
).split(',').join('\\b|\\b') + '\\b')

vue & vue-i18n version

[email protected] (with [email protected])
[email protected]
[email protected]

Reproduction Link

Online Demo
Github Repo

Steps to reproduce

Open the online demo link:

1. refresh without cache (command-shift-R on mac) and see that {{ $t('xxx') }} shows immediately (SSR) but v-t="'xxx'" shows a bit later (no SSR)
2. Right-click and "View page source", and you can see this:

<router-link class="curly_bracket">{{ $t('curly_bracket') }}</router-link>
<router-link class="directive" v-t="'directive'" />

renders to:

<a class="curly_bracket">Using {{ }}, shows in SSR!</a>
<a class="directive"></a>

Only {{ $t() }} is server side rendered, v-t="'xxx" isn't.

This SSR directive works with primitive html tags, but when using with vue components such as <router-link>, it fails.

What is Expected?

v-t directive on <router-link> to work with SSR

What is actually happening?

v-t directive only works with primitive html elements, but not with vue components such as <router-link>.

Thank you so much!

Hello!

I'm working on a Nuxt 3 project using i18n and everything worked fine until I used this plugin for the v-t directive compatibility with SSR, and I wasn't able to replicate the config steps for it to work.

Could it be possible to make this plugin work with Nuxt 3?

Thanks in advance!

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

vue-i18n-extensions will soon be transferred to intlify organaization. After that, it will be developed and maintained on intlify.

The vue-i18n-extensions that has been released on npm will be released as @intlify/vue-i18n-extensions in near future.

Intlify is a new i18n project kickoff by @kazupon. 😉