import axios causes problems in vue v3 and vite

user_9708285 0
Viewed 7626

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

vite axios vuejs3 vue.js
5 Answers

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.

user_10113180

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');
user_81728570

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

user_97082850

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.

user_25684690

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

user_137506770
Related