Static GitHub Issues

[3273] req.headers producing error - Cannot read property 'headers' of undefined

prev: Property or method "$i18n" is not defined on the instance but referenced during render.
next: npm run dev Error

I am using vue-i18n in my project. the issue is when i am loading the page. below codes are able to fetch cookie data but again it producing nuxt error.

I tried putting try..catch, (process.server) but no one worked. Because if this, now axios is not working.

image

code which i am using - in plugin/i18n.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);

export default ({ app, store, req }) => {
	console.log('plugins')
	var cookies = req.headers.cookie
	var KeyNameLocale =  "locale="
	var decodedCookie = decodeURIComponent(cookies)
	console.log('cookie')
	console.log(decodedCookie)
	
  // Set i18n instance on app
  // This way we can use it in middleware and pages asyncData/fetch
  app.i18n = new VueI18n({
    locale: store.state.locale,
    fallbackLocale: 'en',
    messages: {
      'en': require('~/locales/en.json'),
      'fr': require('~/locales/fr.json')
    }
  });
  app.i18n.path = (link) => {
    if (app.i18n.locale === app.i18n.fallbackLocale) {
      return `/${link}`;
    }
    return `/${app.i18n.locale}/${link}`;
  }
}

in middleware/i18n.js

export default function ({ isHMR, app, store, route, params, error, redirect }) {
	store.commit('SET_LANG', 'fr')
}
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c6982">#c6982</a>)</em></sub></div>