Bug with i18n and translation in component

[juleshry]

Describe the bug

Hello,

First of all, thank you for building this project.

I'm working on a Nuxt project with i18n but I can't make histoire work correctly. I've been looking for the source of the problem and here's what I've discovered so far:

• when the module @nuxtjs/i18n is active, there an error 500 displayed in the story iframe that says Cannot read properties of undefined (reading 'public'). I think it happens on module i18n initialization because it doesn't know the Nuxt App context or something (I'm not sure).
• if I disabled the module @nuxtjs/i18n, there's an error when histoire is building that says RollupError: Expected ';', '}' or <eof>. I think this is due to translations 'in-component' using the <i18n></i18n> tag.

Reproduction

I have made a small project that reproduce the problem : https://stackblitz.com/edit/nuxt-starter-xfql3e?file=nuxt.config.ts

System Info

packages versions :
- nuxt: 3.10.3
- @nuxtjs/i18n: 8.2.0
- histoire: 0.17.14
- @histoire/plugin-vue: 0.17.14
- @histoire/plugin-nuxt: 0.17.14

Used Package Manager

npm

Validations

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

[bolt-new-by-stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• nuxt-starter-xfql3e (Open reproduction)

[SteinRobert]

I can confirm this and tracked it down to this change: https://github.com/nuxt-modules/i18n/pull/2828

Not sure what to do about it though. Any idea? I'd be happy to contribute.

[seosmmbusiness]

Same problem. Fresh install of Nuxt + I18n + Histoire

 "dependencies": {
    "@nuxtjs/i18n": "^8.3.0",
    "nuxt": "^3.11.1",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0"
  },
  "devDependencies": {
    "@histoire/plugin-nuxt": "^0.17.15",
    "@histoire/plugin-vue": "^0.17.15",
    "histoire": "^0.17.15"
  }

[kstraszewski]

Same problem here. Has someone manage to implement some kind of workaround?

[letoast]

+1

[TheNaschkatze]

please take care of this i dont want to fork @letoast repo xD and i want to deploy our component documentation :)

[letoast]

please take care of this i dont want to fork @letoast repo xD and i want to deploy our component documentation :)

TBH I'm going to try out nuxt storybook and see if everything works there.

[alexardra]

Having the same issue. As mentioned https://github.com/histoire-dev/histoire/issues/703#issuecomment-2025195493 - downgrading @nuxtjs/i18n to the version below 8.0.2 removed the error for me.

Would be nice to get some followup on this though.

[9M6]

+1

[BBoehm]

Found a solution/workaround for our project:

Versions used (not tested with other versions):

• nuxt: 3.12.2
• @nuxtjs/i18n: 8.3.1
• @nuxtjs/[email protected] (not sure if needed at all)
• histoire: 0.17.17
• @histoire/plugin-vue: 0.17.17
• @histoire/plugin-nuxt: 0.17.17

Code adaptions

histoire.config.ts

process.env.IS_HISTOIRE = 'true'; // we need to know if we're running histoire or not

export default defineConfig({
  //...
});

nuxt.config.ts

export default defineNuxtConfig({
  //...
  modules: [
    //...
    process.env.IS_HISTOIRE === 'true' ? false : '@nuxtjs/i18n', // only use i18n outside histoire
  ],
});

histoire.setup.ts

export const setupVue3 = defineSetupVue3(({ app }) => {
  const pinia = createPinia();
  
  app.use(pinia); // no i18n here!

  window.useI18n = () => ({ // mock the useI18n function to not run into an error
    locale: 'xx',
    t: (string: string) => string,
  });
});

Notes

• We're not using $t in our project. Histoire documentation suggests to use app.config.globalProperties.$t, but adding to the window object might work as well or better.
• For useNuxtApp().$i18n only solution we found was to add a check if it exists, which is sufficient for our needs for now

Edit: In case someone else searches for it: For @nuxt/test-utils/module (needed for vitest) we're using the same strategy to temporarily disable it inside the nuxt.config; thereby enabling the common use of vitest and histoire.

[yuuzora]

+1

[juanlessa]

+1

[Riadz]

+1

[aqz236]

Disabling @ nuxtjs/i18n in nuxt-config.ts is useful, but not elegant. I hope it can be compatible with i18n, and supporting i18n's history is very cool

export default defineNuxtConfig({
  modules: [
    process.env.IS_HISTOIRE === "true" ? false : "@nuxtjs/i18n",
  ],
  compatibilityDate: "2024-11-01",
  i18n: {
  },
});

[VanillaCocaCola]

+1 If I disable @nuxtjs/i18n, I encounter a different error. Cannot read properties of undefined (reading 't')

"@histoire/plugin-nuxt": "^0.17.17",
 "nuxt": "^3.13.2",
  "@nuxtjs/i18n": "^8.0.2",

[genu]

If you disable the module, you'd also need to mock the composables that it provides.

[yuuzora]

I'm confronted to another problem due to this. I'm using useLocalePath to navigate between routes in my project, while I was able to mock the t function like this successfully : window.useI18n = () => ({ // mock the useI18n function to not run into an error locale: 'en', t: (string: string) => string, })

I'm hitting an error everytime "useLocalePath is not defined", and tried to mock it too but it's not working window.useLocalePath = () => { return (path: string) => path; }

Did anyone manage to make this works ?

[BBoehm]

@yuuzora did you try vi.stubGlobal for useLocalePath? Works for several other auto-imported composables for me.

Otherwise you can try mocking the whole import, e.g. in nuxt.config (see my previous post for process.env.IS_HISTOIRE:

alias: {
    ...(process.env.IS_HISTOIRE === 'true' // add the following aliases for histoire only
      ? {
        'path/to/composable': resolve(__dirname, './histoireMocks/myMockComposable'),
      } : {}

Then create ./histoireMocks/myMockComposable, and export a mock there.

Never tried it with an external library, but for internal composables that works for us.

[plonke]

+1

[blu14x]

+1

[gustavotoyota]

Just bumped into this issue. +1

[iammalikov]

+1

"nuxt": "3.17.2",
"@nuxtjs/i18n": "9.5.5",
"@histoire/plugin-nuxt": "1.0.0-alpha.2",
"@histoire/plugin-vue": "1.0.0-alpha.2",