NuxtJS static generation date-fns "locale must contain localize property" + nuxt-i18n

I've recently added the @nuxtjs/date-fns module to my app. My goal was to format in different languages a date into a human-readable format like "Friday, 13th of July 2042".

For language translation, I am using the @nuxtjs/i18n module.

Here is the problematic chunk of code when I try to generate statically:

{{
   $dateFns.format($dateFns.addDays(new Date(startDate), 30), "PP", {
     locale: $i18n.locale
   })
}}

I always get the following error from the date-fns module:

 WARN  [date-fns] locale 'en' not found.                                            09:00:32
 ERROR   /en/offices/ecos-pfaffikon-sz                                              09:00:32
RangeError: locale must contain localize property
    at Object.format (/home/gno/open2work/nuxt/node_modules/date-fns/format/index.js:382:11)
    at Object.dateObj.format (node_modules/.cache/nuxt/date-fns.js:31:0)
    at a.render (components/TabFix.vue?b9bd:1:0)
    at a.t._render (/home/gno/open2work/nuxt/node_modules/vue/dist/vue.runtime.common.prod.js:6:35346)
    at /home/gno/open2work/nuxt/node_modules/vue-server-renderer/build.prod.js:1:70916
    at runNextTicks (node:internal/process/task_queues:58:5)
    at listOnTimeout (node:internal/timers:525:9)
    at processTimers (node:internal/timers:499:7)

I've already tried to wrap the chunk of code into <client-only></client-only> without any successful result.

Everything works properly when I am on dev mode. I think the problem may lie in the generation process, and there is certainly a conflict between the client-side and server-side.

Also my nuxt.config.js

 dateFns: {
    methods: ["format", "differenceInMinutes", "addDays"],
    locales: ["en", "de", "fr"],
    fallbackLocale: "en"
  },
"nuxt-i18n",
      {
        seo: false,
        detectBrowserLanguage: {
          useCookie: true,
          cookieKey: "i18n_redirected",
          onlyOnRoot: true
        },
        langDir: "lang/",
        lazy: true,
        locales: [
          {
            code: "en",
            iso: "en-US",
            file: "en.js"
          },
          {
            code: "de",
            iso: "de-DE",
            file: "de.js"
          },
          {
            code: "fr",
            iso: "fr-FR",
            file: "fr.js"
          }
        ],
        vueI18n: {
          fallbackLocale: "de"
        },
        defaultLocale: "de",
        strategy: "prefix",
        parsePages: false
}

As stated in the error en is not an available locale.

More info on the docs here: https://date-fns.org/v2.22.1/docs/I18n
date-fns use more of a enUS or enGB format for it's locales.

If you import it into your component, it uses a en-GB format, even worse I know..