"export 'default' (imported as 'Vue') was not found in 'vue' (Vuex, Store)

Question

I am new to Vue and I want to rebuild a existing CMS using Vue. As I was building the authentication system, this error appeared:

 WARNING  Compiled with 1 warnings                                                                                                                                                                                                                           17:16:12
 warning  in ./src/store/index.js

"export 'default' (imported as 'Vue') was not found in 'vue'

The browser-console is telling me this:

Uncaught TypeError: Cannot read property 'use' of undefined
    at eval (index.js:10)
    at Module../src/store/index.js (app.js:1337)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/views/auth/Login.vue?vue&type=script&lang=js:2)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/views/auth/Login.vue?vue&type=script&lang=js (app.js:974)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (Login.vue?vue&type=script&lang=js:2)
    at Module../src/views/auth/Login.vue?vue&type=script&lang=js (app.js:1469)

My main.js file:

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

createApp(App).use(router).mount('#app')

My store/index.js file:

import Vuex from 'vuex'
import Vue from 'vue'
import axios from 'axios'

Vue.use(Vuex)
axios.defaults.baseURL = 'https://[blablabla]/api'

export const store = new Vuex.Store({
    state: {
        access_token: window.localStorage.getItem('access_token') || null,
        filter: 'all',
        todos: []
    },
    getters: {
        access_token: state => {
            return state.access_token;
        }
    },
    mutations: {
        retreiveToken(state, token) {
            state.access_token = token;
        }
    },
    actions: {
        authenticate(context, credentials) {
            axios.post('/user/authenticate.php', { username: credentials.username, password: credentials.password })
                .then(response => {
                    // const token = response.data.access_token
                    // localStorage.setItem('access_token', token)
                    // context.commit('retrieveToken', token)
                    console.log(response)
                })
                .catch(error => {
                    console.log(error)
                })
        }
    }
})

My /views/auth/Login.vue script:

<script>
import { store } from '@/store'

export default {
    name: 'Login',
    data() {
        return{
            username: '',
            password: ''
        }
    },
    methods: {
        login(){
            store.dispatch('authenticate', {
                username: this.username,
                password: this.password
            })
        }
    }
}
</script>

When i remove "Vue.use(Vuex)" the browser errors with:

 [vuex] must call Vue.use(Vuex) before creating a store instance

Can someone tell me what is going on here? Thanks!

Answer 1

The suggestion from vladimir was right.

It seems like I have mixed vue3 with vue2. After switching to vue2 everything worked perfectly!