I18n-module: Cannot read property 'headers' of undefined after Nuxt Generate

[NadhirBoukhenifra]

Hello,
another error appears after run npm run generate.

Steps:

1. try create a new nuxt project like:
   vue init vuetifyjs/nuxt my-project then npm install or yarn

1. install this nuxt-i18n plugin:
   yarn add nuxt-i18n then add some configuration to nuxt.config.js.

2. npm run dev works fine.

3. npm run generate shows many errors: like this:

 ROUTE  /en/pages/about

  TypeError: Cannot read property 'headers' of undefined

  - server-bundle.js:5621 module.exports.__webpack_exports__.default
    server-bundle.js:5621:43

  - server-bundle.js:1902 promisify
    server-bundle.js:1902:15

  - server-bundle.js:1883 middlewareSeries
    server-bundle.js:1883:10

  - server-bundle.js:5465 module.exports.__webpack_exports__.default
    server-bundle.js:5465:81

1. im sure that the errors from this plugin, i have disabled it from nuxt.config.js, and re run npm run generate and everything works fine.

2. is this plugin works with npm run generate ?

any help!

_{This question is available on Nuxt.js community (#c43)}

[paulgv]

Hey! Could you share the config you're using with nuxt-i18n? I've tried generating a vuetifyjs/nuxt project with a very basic configuration and didn't encounter this issue.
nuxt-i18n should work with generate but the main focus is SSR/SPA at the moment.

[NadhirBoukhenifra]

modules: [
    ['nuxt-i18n', {
      locales: [
        {
          code: 'en',
          iso: 'en-US',
          name: 'English',
          langFile: 'en-US.json'
        },
        {
          code: 'ar',
          iso: 'ar-DZ',
          name: 'العربية',
          langFile: 'ar-DZ.json'
        }
      ],
      loadLanguagesAsync: true,
      langDir: 'locales/',
      redirectRootToLocale: 'en'
    }]
  ]

im using npm run build then npm run start for production
so npm run generate just for testing this plugin ;).

[paulgv]

The problem would be that you have enabled translations lazy-loading, which can't work in generate mode (there is no information about this limitation, I should get to it :/).

[nicoladl]

In this case I used vue-i18n instead of nuxt-i18n so I can import (lazy-load) translations and redirect to locale via js into the middleware

[sudhir600]

i am using vue-i18n but getting same issue.

[Guito]

Hi @paulgv
This is also happening using different domains. I would like to help to integrate it, do you have any idea where and how I should start?

 ROUTE  /

  TypeError: Cannot read property 'headers' of undefined

  - server-bundle.js:5421 getHostname
    server-bundle.js:5421:79

  - server-bundle.js:5425 getLocaleDomain
    server-bundle.js:5425:64

  - server-bundle.js:5485 module.exports.__webpack_exports__.a
    server-bundle.js:5485:26

  - server-bundle.js:1930 createApp
    server-bundle.js:1930:207

[paulgv]

Hi @Guito !
This must come from here
Maybe we should add some checks on the req object but I wonder why it's undefined server-side in your case, what backend are you using?

[Guito]

It's when using nuxt generate. In nuxt generate there is no request as stated in the api: https://nuxtjs.org/api/context.

Yesterday I spent some time trying to fix it but it seems quite hard to achieve what I want. If you remember me, I was doing a multi-domain project and everything is working correctly with nuxt build, nuxt start. Now, I was trying to use nuxt generate to improve the speed.

What I want is the following:
Generate the files in folders, for example: /en /es /fr (I want it this way so I can name some htmls the same)
Then, in the urls, I don't want to show the /en /es /fr

In order to make it partially work with different domains, I changed only 2 parts of the code:
In routing.js I added another if in the switchLocalePathFactory function

if (process.static) {
    protocol = 'https'
}

And in main.js the same

if (process.static) {
    const routeLocale = getLocaleFromRoute(route, app.i18n.routesNameSeparator, app.i18n.locales)
    locale = routeLocale ? routeLocale : locale
}

But as I said, this is not totally working, I don't know if you have any other idea :-)

[paulgv]

Hey @Guito
If you're generating a static version of your app, I feel like nuxt-i18n should not be responsible for the domain names, that should be handled at the domain level where you would make each domain point directly to the correct folder (/en, /es, /fr) on the server. What do you think?

[Guito]

I agree, I wanted to do it with nginx, however, in the hrefs it says /en/path. I am not sure, but if I use generate, when using nuxt-links it should be the same as ssr, isn't it?

[paulgv]

Oh I see... So maybe there should be a way to customize localePath() and switchLocalePath() in your case?

[JulienAramino]

Hello,
I have quite the same need:
I would like the pages being generated in different folders using the locales code and using url rewriting on server side.

This is to keep the nuxt-links localePath local and having the switchLocalePath global
ex:
on english website home page
href="http://fr.localhost:3333/accueil" --> switch language to fr
href="/about" --> link to about page

Will it be possible to avoid the TypeError: Cannot read property 'headers' of undefined? and let the app being generated as if differentDomains was set to false ?

Am I wrong? Should everything be handled with url rewriting ?

Thanks

[Guito]

I made it work, however, I had to customize the plugin. In the method
getLocaleBaseUrlFactory I added a new

const GENERATE_DOMAIN_PROTOCOL = '<%= options.generateDomainProtocol %>'
...
if (process.static) {
                protocol = GENERATE_DOMAIN_PROTOCOL // I created this option for the plugin
} else if (!process.browser) {
...

And in main.js

if (process.static) {
    const routeLocale = getLocaleFromRoute(route, app.i18n.routesNameSeparator, app.i18n.locales)
    locale = routeLocale ? routeLocale : locale
  } else if (app.i18n.differentDomains) {
...

Then, I had to do a lot of work using a custom-generate file, and everytime I want to do a release I have to generate for every locale. I don't know if this would be easier with the new nuxt version (I am in 1.4.2 yet)

[JulienAramino]

Hello,

Thanks for your help,
When generated, I would prefer to have some option to customise the switchLocalePath to use full URL (with domain), and at the same time using URL rewriting to redirect request to the right folder.
We only need full URL for switching domain.

So I will try:
Not using differentDomains
Keep the domain in the locales
And build my own domain switch

Thanks

[mk-tool]

I could solve this problem to check req value.

if(req && req.headers && req.headers.cookie){
  // your code
}

[rchl]

I've just tried running npm run generate on fairly big project that is also using lazy loading and it worked just fine so I'll assume current version (v5.12.1) has original problem fixed.

This report talks about too many things anyway, and if there is something to be done, it should be split into separate, more specific, bug report.

[fredericpfisterer]

Hello,

I have the same issue as soon as I try to "yarn generate" after having differentDomains set to true. Any idea what I can do to solve the issue ?

TypeError: Cannot read property 'headers' of undefined at server.js:1:106276 at f (webpack/bootstrap:2:0) at vt (webpack/bootstrap:2:0) at yt (webpack/bootstrap:2:0) at async e.default (webpack/bootstrap:2:0)

Cheers

[rchl]

@fredericpfisterer are you able to create repro using codesandbox and create new issue if so?

[fredericpfisterer]

Hello,

I finally did :

https://codesandbox.io/embed/codesandboxnuxt-zsfbq

And I'm still getting the same error :

[rchl]

@fredericpfisterer Thanks for creating reproduction.

Original issue here was not about differentDomains = true while your is. Original issue is fixed I believe.

Ideally we would close this one and create new one that would have no confusing comments.

But either way, I doubt if differentDomains ever worked in nuxt generate mode because module tries to figure out domain on building and that of course won't work. The logic would have to run dynamically on loading page but I'm uncertain if that's feasible... Would need to be investigated more.

[rchl]

After more thinking...

I think conceptually these are two conflicting features (generate static pages & differentDomains option). With nuxt generate you want all pages to be pre-rendered on the server with correct locale already while differentDomains option implies that there is only one page that dynamically chooses locale based on the requesting domain. You can't have just one html file with both locales pre-rendered unless you generate separate pages for them.

So solution would be to not use differentDomains so that separate pages are generated for each locale and then handle redirecting to correct pages using server-side url redirection (as mentioned above).

The only thing this module can do about it is documenting that and maybe erroring out with better message.

[fredericpfisterer]

True. Thanks for your answer and sorry for the confusion :)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[samamidis]

The same thing happend with me also on universal dev mode the app is doing fine but when i go to production req.headers.cookies return undifined and it breaks the same issue affects my auth persistance any new ideas what todo ??

[rchl]

Can't help unless you show your nuxt-i18n configuration and tell us how you build and deploy your app.

[samamidis]

I am testin a ssr nuxt app and i am trying to deploy it on firebase
I am using nuxt-i18n and fireauth
if you can check the following repo
many thanks
https://github.com/samamidis/dupkassr.git

Στις Δευ, 18 Νοε 2019 στις 1:05 μ.μ., ο/η Rafał Chłodnicki <
[email protected]> έγραψε:

Can't help unless you show your nuxt-i18n configuration, how you build and
deploy your app.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/nuxt-community/nuxt-i18n/issues/53?email_source=notifications&email_token=ADSI6BI7CW22VIORVI6X5RLQUJZIXA5CNFSM4EXB43Z2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEEKCEMA#issuecomment-554967600,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ADSI6BKDJS6U74ZFSWHWRI3QUJZIXANCNFSM4EXB43ZQ
.

--
B.R / Μ.Φ.Χ.
Samamidis Charalampos / Σαμαμίδης Χαράλαμπος
MSc Electrical Engineer / Ηλεκτρολόγος Μηχανικός

[samamidis]

https://dupka-4b29b.web.app/

Στις Δευ, 18 Νοε 2019 στις 1:05 μ.μ., ο/η Rafał Chłodnicki <
[email protected]> έγραψε:

Can't help unless you show your nuxt-i18n configuration, how you build and
deploy your app.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/nuxt-community/nuxt-i18n/issues/53?email_source=notifications&email_token=ADSI6BI7CW22VIORVI6X5RLQUJZIXA5CNFSM4EXB43Z2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEEKCEMA#issuecomment-554967600,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ADSI6BKDJS6U74ZFSWHWRI3QUJZIXANCNFSM4EXB43ZQ
.

--
B.R / Μ.Φ.Χ.
Samamidis Charalampos / Σαμαμίδης Χαράλαμπος
MSc Electrical Engineer / Ηλεκτρολόγος Μηχανικός

[rchl]

I don't know exactly how Firebase deployment works but maybe you are using it wrong.

This code is messed up:
https://github.com/samamidis/dupkassr/blob/6d282eeb1ac348c31b779a0ffcc58a7fa75743b1/prod/server/index.js#L32-L50
I think there is syntax error there and also it's setting exports.nuxtssr twice with different values.

You might have a problem around there, I think. Check that you are passing correct argument to functions.https.onRequest. I think it should be a function with req, res parameters.

[samamidis]

I think the solution is here:
🚑 fucking amazing the problem is the name of the cookie it took me 5 days
to find it
thanks for your time and for the help
https://stackoverflow.com/questions/44929653/firebase-cloud-function-wont-store-cookie-named-other-than-session/44935288#44935288

Στις Δευ, 18 Νοε 2019 στις 4:01 μ.μ., ο/η Rafał Chłodnicki <
[email protected]> έγραψε:

I don't know exactly how Firebase deployment works but maybe you are using
it wrong.

This code is messed up:

https://github.com/samamidis/dupkassr/blob/6d282eeb1ac348c31b779a0ffcc58a7fa75743b1/prod/server/index.js#L32-L50
I think there is syntax error there and also it's setting exports.nuxtssr
twice with different values.

You might have a problem around there, I think. Check that you are passing
correct argument to functions.https.onRequest. I think it should be a
function with req, res parameters.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/nuxt-community/nuxt-i18n/issues/53?email_source=notifications&email_token=ADSI6BJBOY3UXJH45ZM4S7TQUKN4VA5CNFSM4EXB43Z2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEEKQYPQ#issuecomment-555027518,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ADSI6BMJ2KRKNSNRASZDRP3QUKN4VANCNFSM4EXB43ZQ
.

--
B.R / Μ.Φ.Χ.
Samamidis Charalampos / Σαμαμίδης Χαράλαμπος
MSc Electrical Engineer / Ηλεκτρολόγος Μηχανικός

[mehmetacoskun]

if(req && req.headers && req.headers.cookie){

I have changed the line in store/index.js and
It works, thank you...