Vue3 axios Cannot read properties of undefined (reading 'config') - vue.js

Question

I've been following this guide to making a global loader component but there's an issue with setting up the interceptors with the config.
Error: TypeError: Cannot read properties of undefined (reading 'config')
I'm using vue 3.2.2, vuex 4.0.2, axios 0.21, and Laravel 8
The loader component is not working and I suspect it might be due to the config error.
app.js
<script>
import { createApp } from 'vue'
import { createStore } from 'vuex'
import router from './router';
import App from './components/App';
import { loader } from "./loader";
const store = createStore({
state() {
},
modules: {
loader,
}
})
const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')
</script>
App.vue
<script>
import Sidebar from "../components/Sidebar";
import {mapState} from "vuex/dist/vuex.mjs";
import Loader from "./Loader";
import axios from "axios";
axios.defaults.showLoader = true;
export default {
components: {
Sidebar,
Loader
},
computed: {
...mapState('loader', ['loading'])
},
created() {
axios.interceptors.request.use(
config => {
if (config.showLoader) {
store.dispatch('loader/pending');
}
return config;
},
error => {
if (error.config.showLoader) {
store.dispatch('loader/done');
}
return Promise.reject(error);
}
);
axios.interceptors.response.use(
response => {
if (response.config.showLoader) {
store.dispatch('loader/done');
}
return response;
},
error => {
let response = error.response;
if (response.config.showLoader) {
store.dispatch('loader/done');
}
return Promise.reject(error);
}
)
}
}
</script>

Answer 1

Your interceptor arrow function having issues with config param
axios.interceptors.request.use((config) => {
if (config.showLoader) {
store.dispatch('loader/pending');
}
return config;
}, (error) => {
if (error.config.showLoader) {
store.dispatch('loader/done');
}
return Promise.reject(error);
});
axios.interceptors.response.use((response) => {
if (response.config.showLoader) {
store.dispatch('loader/done');
}
return response;
}, (error) => {
let response = error.response;
if (response.config.showLoader) {
store.dispatch('loader/done');
}
return Promise.reject(error);
})