Vue build didnt include my function to output .js file

Question

Works fine in dev mode, but after build process vue not includes setupToken function (from @/api.js) to app.js output file.

// App.vue
//...
import { setupToken } from '@/api
export default {
  mounted () {
    this.setupToken() // TypeError: this.setupToken is not a function
  }
}

// @/api.js
import { mande } from 'mande'

export const postsAPI = mande(`${process.env.VUE_APP_ROOT_URL}/api/v1/posts`)

export const setupToken = ({ token }) => {
  postsAPI.options.headers.Authorization = 'Bearer ' + token
}

I guess the problem with webpack config (im using default one), but not sure how to fix it.

DoronG · Accepted Answer · 2022-02-16 13:49:57Z

4

+300

setupToken does not exist on the object you're exporting from App.vue.

You are importing setupToken from @/api so you have to call it directly, i.e. setupToken() and not as an instance method, i.e. this.setupToken()

WebPack sees you are not using the method you're importing from @/api (because you are calling it as an instance method) so it tree-shakes it out.

BTW, try using TypeScript, it would have let you know of that error.

answered Feb 16, 2022 at 13:49

DoronG

2,68318 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Esa Kian · Accepted Answer · 2022-02-17 17:28:42Z

1

Import api.js in main.js

    import Vue from 'vue'
    import App from './App.vue'
    import api from './api'
    
    Vue.config.productionTip = false
    
    new Vue({
      api,
      render: function (h) {
        return h(App)
      },
    }).$mount('#app')

Modify api.js:

   import Vue from 'vue'  
   Vue.mixin({
      methods: {
        setupToken({ token }) {
          postsAPI.options.headers.Authorization = 'Bearer ' + token
        }
      }
    }

edited Feb 17, 2022 at 17:28

answered Feb 17, 2022 at 17:19

Esa Kian

2811 gold badge5 silver badges12 bronze badges

Collectives™ on Stack Overflow

Vue build didnt include my function to output .js file

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related