12

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

5
  • you can use the native fetch method instead of axios. Of course, only when it comes to simple requests and you don't need to use any of axios extra tools. Jan 26, 2021 at 14:33
  • yes I know, but I was hoping to use the vue-auth library which wants axios for auth against an api
    – baradhili
    Jan 27, 2021 at 1:18
  • I couldn't reproduce - used npx create-vite-app vite-test then yarn add axios, then your code above with simple app.axios.get(...) in main and another in App. Can you flesh out details to reproduce? Version "vite": "^1.0.0-rc.13" Jan 27, 2021 at 3:17
  • yes I'm running vite 2.0.0 - its looking more like a vite problem and vite's issue log suggests it falls in "won't fix"
    – baradhili
    Jan 27, 2021 at 3:29
  • 2
    Please see Vite package - rollup.config.js - import commonjs from '@rollup/plugin-commonjs' which says here @rollup/plugin-commonjs README - A Rollup plugin to convert CommonJS modules to ES6, so they can be included in a Rollup bundle.
    – user8745435
    Jan 27, 2021 at 11:36

6 Answers 6

4

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.

3
  • sounds like a good solution... I've kinda abandoned axios under vue v3 since I can use fetch with vuex
    – baradhili
    Oct 25, 2021 at 9:05
  • Solved it for me
    – mecograph
    Jan 26, 2022 at 20:05
  • 2
    Redaxios doesn't yet support interceptors, so this didn't work for me. There is a feature request for it: github.com/developit/redaxios/issues/9
    – Joe Maffei
    May 24, 2022 at 22:43
4

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');
1
  • 1
    Thanks a lot @BoussadjraBrahim this has solved a huge problem for me. I can now build & run successfully.
    – Vixson
    Apr 28, 2022 at 2:12
3

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

2
  • 1
    Still not reproducible with vite 2.0.0-beta50, axios is working fine in a minimal app. Jan 27, 2021 at 4:34
  • 1
    The issues cited are misleading in the case of axios - #174 (citing an axios problem) is old and closed off to #162, which cites a different library remote-redux-devtools, which is still problematic, whereas axios seems to works now (not sure if in every scenario).
    – user14903560
    Jan 27, 2021 at 4:58
1

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.

1

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

0
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')

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.