QuiiBz / next-international

Type-safe internationalization (i18n) for Next.js
https://next-international.vercel.app
MIT License
1.19k stars 52 forks source link

Argument of type 'string' is not assignable to parameter of type 'never'.ts(2345) #368

Closed nicitaacom closed 4 months ago

nicitaacom commented 4 months ago

I want to change language from 'en' to 'fr'

I use this guide

I expect that in this guide I can just ctrl+c ctrl+v and it will work with next.js 14

In fact I get this error Argument of type 'string' is not assignable to parameter of type 'never'.ts(2345)

Code I use to get error app/[locale]/client/page.tsx

'use client'

import { useI18n, useScopedI18n } from '../../locales/client'
import { useChangeLocale, useCurrentLocale } from '../../locales/client'

export function ClientPage () {

 const t = useI18n()
  const scopedT = useScopedI18n('hello')
   const changeLocale = useChangeLocale()
  const locale = useCurrentLocale()
  return (
    <div>
      <p>{t('hello')}</p>

      {/* Both are equivalent: */}
      <p>{t('hello.world')}</p>
      <p>{scopedT('world')}</p>

      <p>{t('welcome', { name: 'John' })}</p>
      <p>{t('welcome', { name: <strong>John</strong> })}</p>
       <>
      <p>Current locale: {locale}</p>
      <button onClick={() => changeLocale('en')}>English</button>
      <button onClick={() => changeLocale('fr')}>French</button>
    </>
    </div>
  )
}


app/locales/client.ts

// locales/client.ts
"use client"
import { createI18nClient } from 'next-international/client'

export const { useI18n, useScopedI18n, I18nProviderClient } = createI18nClient({
  en: () => import('./en'),
  fr: () => import('./fr')
})

export const {
  useChangeLocale,
  useCurrentLocale,

} = createI18nClient({

})

app/locales/server.ts

// locales/server.ts
import { createI18nServer } from 'next-international/server'

export const { getI18n, getScopedI18n, getStaticParams } = createI18nServer({
  en: () => import('./en'),
  fr: () => import('./fr')
})

export const {
  getCurrentLocale,

} = createI18nServer({

})

Also in guide I see

export const {
  getCurrentLocale,
  ...
} = createI18nServer({
  ...
})

But if I keep ... it will throw the error


I expect that you send me MVP where internatiolazation work like / - english /fr - french

for example Because I don't want to have /en route for english language I want to have / route for english language

QuiiBz commented 4 months ago

I see that you have some snippets without any locale define inside createI18nClient / createI18nServer: you have to pass an least one locale, as shown in the example.

Also in guide I see

export const { getCurrentLocale, ... } = createI18nServer({ ... }) But if I keep ... it will throw the error

Indeed you shouldn't copy the "...", it's just to simplify the example and not re-write the locale object. The full example would be:

export const { getCurrentLocale, useI18n, useScopedI18n, I18nProviderClient } = createI18nClient({
  en: () => import('./en'),
  fr: () => import('./fr')
})

As you can see, the getCurrentLocale function is retrieved from the same createI18nClient call, not a new one. Here are the full files:

// locales/client.ts
"use client"
import { createI18nClient } from 'next-international/client'

export const { useChangeLocale, useCurrentLocale, useI18n, useScopedI18n, I18nProviderClient } = createI18nClient({
  en: () => import('./en'),
  fr: () => import('./fr')
})
// locales/server.ts
import { createI18nServer } from 'next-international/server'

export const { getCurrentLocale, getI18n, getScopedI18n, getStaticParams } = createI18nServer({
  en: () => import('./en'),
  fr: () => import('./fr')
})
nicitaacom commented 4 months ago

I'm still have /en instead of / for english language image

I'm waiting for some minimal example I can just copy paste

QuiiBz commented 3 months ago

This is a totally unrelated thing, see the documentation that covers this feature: https://next-international.vercel.app/docs/app-middleware-configuration#rewrite-the-url-to-hide-the-locale

Inside your middleware, you have to use the urlMappingStrategy option as rewrite or rewriteDefault depending on what you want:

const I18nMiddleware = createI18nMiddleware({
  locales: ['en', 'fr'],
  defaultLocale: 'en',
  urlMappingStrategy: 'rewriteDefault' // or 'rewrite'
})

I'm waiting for some minimal example I can just copy paste

We do have both an example application and a CodeSandbox that you can refer too, along with the documentation.

nicitaacom commented 3 months ago
rewriteDefault

https://github.com/QuiiBz/next-international/assets/39565703/423fb833-134a-43de-861d-3ea21e445ddc

As you see translation work only if I delete property you message me to set

Plese fix this issue

QuiiBz commented 3 months ago

CodeSandbox doesn't work correctly with middlewares (notably with cookies), do you have the same issue when running the code locally?

nicitaacom commented 3 months ago

CodeSandbox doesn't work correctly with middlewares (notably with cookies), do you have the same issue when running the code locally?

To reproduce:

  1. fork this https://github.com/QuiiBz/next-international
  2. git clone forked repository
  3. cd examples
  4. cd next-app
  5. pnpm i

image

I tried to fix it with pnpm i next-international/middleware but got this

 pnpm i next-international/middleware
 ERROR  Command failed with exit code 128: git ls-remote git+ssh://git@github.com/next-international/middleware.git HEAD
ERROR: Repository not found.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

This error happened while installing a direct dependency of /home/kali/Documents/GitHub/mvp-without-repo-internatiolization/fork-next-international/examples/next-app

pnpm: Command failed with exit code 128: git ls-remote git+ssh://git@github.com/next-international/middleware.git HEAD
ERROR: Repository not found.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
    at makeError (/usr/local/lib/node_modules/pnpm/dist/pnpm.cjs:24966:17)
    at handlePromise (/usr/local/lib/node_modules/pnpm/dist/pnpm.cjs:25537:33)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async getRepoRefs (/usr/local/lib/node_modules/pnpm/dist/pnpm.cjs:110687:23)
    at async resolveRef (/usr/local/lib/node_modules/pnpm/dist/pnpm.cjs:110699:20)
    at async resolveGit (/usr/local/lib/node_modules/pnpm/dist/pnpm.cjs:110650:24)
    at async Object.resolve (/usr/local/lib/node_modules/pnpm/dist/pnpm.cjs:110949:173)
    at async run (/usr/local/lib/node_modules/pnpm/dist/pnpm.cjs:123088:23)
../..                                    | Pr

Note: I do it on my device (not remote device like codesandbox)

QuiiBz commented 3 months ago

This is a separate issue, you have to build the packages locally since you're forking the repo. See the contributing guide: https://github.com/QuiiBz/next-international/blob/main/CONTRIBUTING.md

If you don't want to do so, just update the package.json to use the version published on npm instead of workspace:*