Cannot even build project anymore: Cannot read property 'startsWith' of undefined

[Fyroman]

Version

nuxt-i18n: 6.20.6
nuxt: 2.15.2

Could not compile template D:\Dokumenti\vue\gauss-web-new\node_modules\nuxt-i18n\src\templates\options.js: Cannot read property 'startsWith' of undefined 13:50:30

at node_modules@nuxt\builder\dist\builder.js:723:17
at async Promise.all (index 431)
at async Builder.compileTemplates (node_modules@nuxt\builder\dist\builder.js:701:5)
at async Builder.generateRoutesAndFiles (node_modules@nuxt\builder\dist\builder.js:388:5)
at async Builder.build (node_modules@nuxt\builder\dist\builder.js:319:5)
at async Object._buildDev (node_modules@nuxt\cli\dist\cli-dev.js:107:5)
at async Object.startDev (node_modules@nuxt\cli\dist\cli-dev.js:65:7)
at async Object.run (node_modules@nuxt\cli\dist\cli-dev.js:52:5)
at async NuxtCommand.run (node_modules@nuxt\cli\dist\cli-index.js:413:7)

I'm sorry, I don't have time or can be bothered to do all the detailed reporting and reproduction. Nothing changed on my side, it just stopped working after update. (Not sure which version was used before that).

[rchl]

Can you post your nuxt-i18n configuration (with anything sensitive redacted out)?

[Fyroman]

await module.addModule([
    'nuxt-i18n',
    {
      langDir: locales.length ? '.nuxt/gb-cms/locales/' : undefined, // locales.length is true
      defaultLocale: defaultLanguage ? defaultLanguage.code2 : 'hr',
      lazy: true,
      locales: locales.map((locale) => ({
        code: locale.code || (locale.file && locale.file.split('.')[0]),
        iso: locale.iso || (locale.file && locale.file.split('.')[0]),
        file: locale.file,
        name: locale.name,
      })),
      vueI18n: {
        fallbackLocale: defaultLanguage ? defaultLanguage.code2 : 'hr',
        dateTimeFormats: {
          en: {
            short: {
              year: 'numeric',
              month: 'short',
              day: 'numeric',
            },
            long: {
              year: 'numeric',
              month: 'long',
              day: 'numeric',
              weekday: 'long',
              hour: 'numeric',
              minute: 'numeric',
            },
          },
          hr: {
            short: {
              year: 'numeric',
              month: 'short',
              day: 'numeric',
            },
            long: {
              year: 'numeric',
              month: 'long',
              day: 'numeric',
              weekday: 'long',
              hour: 'numeric',
              minute: 'numeric',
            },
          },
        },
      },
      parsePages: false,
      pages: {
        [Page.Product]: {
          en: '/product/:slug',
          hr: '/product/:slug',
        },
        [Page.Login]: {
          en: '/login',
          hr: '/prijava',
        },
        [Page.Register]: {
          en: '/register',
          hr: '/registracija',
        },
        [Page.Profile]: {
          en: '/profile',
          hr: '/profil',
        },
        [Page.Cart]: {
          en: '/cart',
          hr: '/kosarica',
        },
        [Page.Shop]: {
          en: '/shop/:slug?',
          hr: '/shop/:slug?',
        },
        [Page.Checkout]: {
          en: '/checkout',
          hr: '/naplata',
        },
        [Page.CheckoutSuccess]: {
          en: '/checkout/success',
          hr: '/naplata/uspjesna',
        },
      },
      detectBrowserLanguage: {
        useCookie: true,
        cookieKey: 'locale',
        onlyOnRoot: true,
        alwaysRedirect: true,
      },
    },
  ])

Locales end up being this:

[
  {
    code: 'hr',
    iso: 'hr',
    file: 'hr.js',
    name: 'Croatian'
  },
  {
    code: 'en',
    iso: 'en',
    file: 'en.js',
    name: 'English'
  },
  {
    code: 'de',
    iso: 'de',
    file: undefined,
    name: 'German'
  }
]

[Fyroman]

It seems it's because one of files is undefined.

[rchl]

Yes. That's the reason.

There is a slight change of behavior in recent changes. Previously it would not hard crash at build time but would throw an error anyway:

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                                     

This dependency was not found:                                                                                                                                                                                                              

* ~/.nuxt/gb-cms/locales in ./test/fixture/basic/.nuxt/nuxt-i18n/utils.js  

And when running in dev mode you would also see an error overlay over the page.

So I'm not sure how it has worked before for you.
Maybe in production it would not have the error overlay but I can imagine there would be some unexpected issues anyway.

[Fyroman]

So how will this be handled? Nicer error message but still error?

[rchl]

I would prefer to just do what we do now and crash at build time when file is missing.

If I decide to just ignore such problem then instead there will be a warning at runtime when attempting to load the language that doesn't exist.

Ideally, the file would always be provided. The documentation states that file is required when using lazy so it works as intended now.

You can just assign the English locale file if you don't have a language file for a specific locale.

[rchl]

But improving the error message is also something that can be done of course.

[Fyroman]

I probably did read that file is required, but in my own development didn't account for the fact that it could be undefined somehow – it slipped.

It's not a problem to handle it on package user's end, but improving the error message for something that is explicitly stated in docs would probably go a long way to reduce headaches. ¯\_(ツ)_/¯

[rchl]

Improved various error cases in #1102