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

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• 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 open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[bolt-new-by-stackblitz]

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:
nuxt-modules/i18n#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 #703 (comment) - 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/i18n-edge@8.0.0-rc.9-28375354.2a7ee97 (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.