i18next version 23.0.0 or higher includes breaking changes.

[izyuumi]

Describe the bug

When using the HeadHrefLangs component with import { HeadHrefLangs } from "astro-i18next/components";, I get a type error: “Cannot read properties of undefined (reading 'map')” when running npm run dev. However, there are no error thrown when using npm run preview.

SUPPLEMENT: As per https://github.com/yassinedoghri/astro-i18next/issues/171#issuecomment-1703785029, the main issue was with the use of version that is higher than 22.x.x, which included breaking changes. By using a version less than 23.0.0, npm run dev works as expected.

To Reproduce

Steps to reproduce the behavior:

1. import the HeadHrefLangs component and use it in pages/index.astro
2. run npm run dev
3. go to localhost:3000 (or wherever the page is hosted locally)

Expected behavior

No error to be thrown.

Screenshots

If applicable, add screenshots to help explain your problem.

Context (please complete the following information):

• astro-i18next version: 1.0.0-beta.21
• astro version: 2.10.1
• OS: MacOS 13.5
• Browser: tested with Arc, Chrome, Firefox, and Safari

[dluciano]

workaround:

rm -rf node_modules && pnpm i --shamefully-hoist=true

[izyuumi]

I am still getting the same error.

[dluciano]

I am still getting the same error.

You could try adding a .npmrc file in the root directory of your project and then run

rm -rf node_modules && pnpm install

That worked for me.

[izyuumi]

Thank you for the suggestion.

Do I need to put anything inside the .npmrc file? I created an empty .npmrc file, and ran the command, but it did not work.

[xerullian]

Yes, put the below in your .npmrc file. This works for me.

# Expose Astro dependencies for `pnpm` users
shamefully-hoist=true

[izyuumi]

Thank you for the detail. It is still throwing the same error. The code I am using is https://github.com/onekiji/onekiji. I clone the repo onto my local computer, create .npmrc with shamefully-hoist=true as the content, run pnpm i, and run pnpm dev, and the error message is still present. Any help is appreciated.

[ZerdoX-x]

@Xerullian which versions of i18next and astro-i18next are you using?

By experimenting with versions and reading changelog I found out that upgrading i18next@22.5.1 (latest v22 release) to 23.0.0 leads to breaking latest astro-i18next (and probably all versions) when using pnpm (I haven't tested other managers tho)

@aapl-yumi I also could not make all of them work together by configuring pnpm. You can delete .npmrc and downgrade i18next as mentioned above. And could you please update issue's title and description according to this? We have exact information and even commits which break astro-i18next. Also please mention current workaround. Thank you.

[izyuumi]

@ZerdoX-x Thank you very much for your suggestion on downgrading. I was fiddling around with astro-i18next, but not i18next. I just downgraded i18next to i18next@22.5.1, and pnpm dev works as expected. Furthermore, I will alter the title and description to regard the issues with the version.

[ZerdoX-x]

Please reopen

[calmonr]

I'm using the latest (v23.4.6) i18next version and I have a local component exactly like HeadHrefLangs from astro-i18next. For some reason the problem only happens when importing from astro-i18next, if you have the component locally it will work.

[ZerdoX-x]

@calmonr because it's related to pnpm and how it's managing node_modules.

[ZerdoX-x]

@aapl-yumi would you like to reopen issue? if not, i'll just reopen this issue in separate one

[webvs2]

Please consider trying this configuration. I have also encountered a similar issue when using the 'LanguageSelector' component, which resulted in a 'map' error from the 'i18next.languages'. By reducing the i18next version to 22, this configuration eliminates the error. I hope this solution proves helpful to everyone.