@nuxtjs/axios - error in adding requestInterceptor

[aslam]

Following the docs I am trying to add the request interceptor to include the Authorization token:

nuxt.config.js

modules: [
    '@nuxtjs/pwa',
    '@nuxtjs/component-cache',
    ['@nuxtjs/axios', {
      requestInterceptor: (config, { store }) => {
        if (store.state.auth.accessToken) {
          config.headers.common['Authorization'] = store.state.auth.accessToken
        }

        return config
      }
    }]
]

However, this throws up an error while building:

 error  in ./.nuxt/axios.plugin.0bf836c4.js

Syntax Error: Unexpected token, expected ( (106:28)

  104 |   
  105 |   // Custom request interceptor
> 106 |   const reqInter = function function(config, _ref) {
      |                             ^
  107 |       var store = _ref.store;
  108 | 
  109 |       if (store.state.auth.accessToken) {

 @ ./.nuxt/index.js 165:0-30
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=$client&reload=true ./.nuxt/client.js

I am using backpack for my builds, the following is my package.json

{
  "name": "hl-student-web",
  "version": "1.0.0",
  "scripts": {
    "dev": "backpack dev",
    "build": "nuxt build && backpack build",
    "start": "NODE_ENV=production node build/main.js",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^3.1.0",
    "@nuxtjs/component-cache": "^0.1.3",
    "@nuxtjs/pwa": "latest",
    "backpack-core": "^0.4.1",
    "body-parser": "^1.17.2",
    "es6-promise": "^4.1.1",
    "express": "^4.15.3",
    "firebase": "^4.2.0",
    "js-cookie": "^2.1.4",
    "jwt-decode": "^2.2.0",
    "nuxt": "^1.0.0-rc3",
    "vuelidate": "^0.5.0",
    "vuetify": "^0.14.0",
    "whatwg-fetch": "^2.0.3"
  },
  "devDependencies": {
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "vuex-router-sync": "^4.2.0"
  }
}

I think I am using the compatible packages. Is there something I am doing wrong in the config or the way I am trying to add the interceptor?

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

[pi0]

Hi. Thanks for report. As a workaround would you please try this :

modules: [
    '@nuxtjs/pwa',
    '@nuxtjs/component-cache',
    ['@nuxtjs/axios', {
      requestInterceptor (config, { store }) {
        if (store.state.auth.accessToken) {
          config.headers.common['Authorization'] = store.state.auth.accessToken
        }
        return config
      }
    }]
]

[aslam]

@pi0 thanks for the reply. No luck:

modules: [
    '@nuxtjs/pwa',
    '@nuxtjs/component-cache',
    ['@nuxtjs/axios', {
      baseURL: 'https://now-staging.syedaslam.com/',
      requestInterceptor (config, { store }) {
        if (store.state.auth.accessToken) {
          config.headers.common['Authorization'] = store.state.auth.accessToken
        }
        return config
      }
    }]
  ]

p.s.: tried with and without baseURL.

[awronski]

This is the same problem as: https://github.com/nuxt/nuxt.js/issues/723

We used the same code as above and have the same problem.

I am thinking about clean solution. Any idea? https://runkit.com/pi0/591db24aff32a300123e931a

[pi0]

@awronski Actually serialization of functions is a REAAL headache but unavoidable :))) One possible solution would be serialized as is without adding a function before or maybe parse the string and replace function to `` just on the first line.

[awronski]

Hi! @pi ,

The first version of the fork was serializing as it is but then named function was not working :( https://github.com/nuxt-community/modules/pull/100#issuecomment-318888180

We fixed it and now it is not working with the babel :)

Maybe the only solution is to hack it as you suggest.

[aslam]

@pi0, @awronski

The solution of giving a different name to the function as in the last comment by @slevp in https://github.com/nuxt/nuxt.js/issues/723 worked for me (at least in dev):

modules: [
    '@nuxtjs/pwa',
    '@nuxtjs/component-cache',
    ['@nuxtjs/axios', {
      baseURL: 'https://now-staging.syedaslam.com/',
      requestInterceptor: function _reqInterceptor (config, { store }) {
        if (store.state.auth.accessToken) {
          config.headers.common['Authorization'] = store.state.auth.accessToken
        }

        return config
      }
    }]
]

[pi0]

should be fixed with #108 please upgrade to "@nuxtjs/axios" : "^3.1.2"