CODEWITHSUNDEEP
vue.jsaxiosvuejs3vite
baradhili
baradhili

Reputation: 584

import axios causes problems in vue v3 and vite

import axios from 'axios';

results in vite throwing

Uncaught SyntaxError: import not found: default

Example Code 
import { createApp } from 'vue';
import TheContainer from './components/TheContainer.vue';
import axios from 'axios';

axios.defaults.baseURL = process.env.VUE_APP_API_URL;

const app = createApp({
    components: {
        TheContainer
    }
})
app.axios = axios;
app.$http = axios;
app.config.globalProperties.axios = axios;
app.config.globalProperties.$http = axios;
app.mount('#app');

This is using axios 0.21.1 and vue 3.0.5

Trying to work out what is wrong... vuejs v3 cookbook sadly uses a call to the axios 0.14 code via a cdn

Upvotes: 13

Views: 25070

Answers (6)

Михаил
Михаил

Reputation: 74

import { createApp } from 'vue'
import router from './adminroutes'

import axios from 'axios'
window.axios = axios
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
window.axios.defaults.withCredentials = true

const app = createApp({})

app.use(router)
app.mount('#adminapp')

Upvotes: 0

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

You should install a bundled es module of axios :

remove the current version:

 npm uninstall axios

then run:

 npm install @bundled-es-modules/axios --save

then use it like :

import { createApp } from 'vue';
import TheContainer from './components/TheContainer.vue';
import axios from 'axios/axios.js';

//create an axios instance in order to use it globally with same config
const instance = axios.create({
   baseURL: process.env.VUE_APP_API_URL,
  withCredentials: false,
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },

})


const app = createApp({
    components: {
        TheContainer
    }
})

app.config.globalProperties.axios = instance;

app.mount('#app');

Upvotes: 4

Micaiah Effiong
Micaiah Effiong

Reputation: 89

You should install this vite plugin @originjs/vite-plugin-commonjs.

npm install @originjs/vite-plugin-commonjs --save-dev

Add the plugin to your vite.config.ts and you are good to go.

import { viteCommonjs } from '@originjs/vite-plugin-commonjs'

export default {
    plugins: [
        viteCommonjs()
    ]
}

That is all

Upvotes: 1

hatef
hatef

Reputation: 6219

So, this issue just took me some time to resolve and I'd like to share my experience hoping it helps someone.

Although, some of the solutions in this answer helped to solve the initial problem, I had other problems further along the way. For example, when I installed redaxios I noticed it was not sending the X-XSRF-TOKEN in the request headers (required by my backend service, Laravel Sanctum).

At the end what really solved my issue was simply deleting the node_modules directory and a fresh install (yarn). I think vite had a cached version of installed directories and no matter how many times I reinstalled axios or switched between the packages it kept showing some errors.

Upvotes: 2

Király István
Király István

Reputation: 619

Redaxios is a modern remake of axios.

import axios from 'redaxios';
// use as you would normally

This solved my problem with vite and axios. Works in webpack too.

Upvotes: 5

baradhili
baradhili

Reputation: 584

Looks like the problem is in Vite 2.x

issue #174 and issue 162 suggests that vite would prefer to have to deal with proper ESM modules instead of fixing them within itself (fair call)..

So as of vite 2.0.0-beta50 I'm going to go with building it using fetch and discarding vue-auth (which looks horribly complex for vue v3 anyway)

EDIT: never got to the bottom of this, but since I was building this in Homestead/Vagrant within Laravel - I found taking it completely out of that environment seemed to solve the problem.. I also noticed Vite didn't always notice code changes within the Homestead/laravel environment - so it might be caching or other things... anyways I took it out and things worked fine

Upvotes: 3

Related Questions