Uncaught SnytaxError: import not found: default. How do I fix that?

I'm new to Vue.js and this is my first project with it - it's a weather forecast page with multiple views for different forecasts but that's not the important part. I wrote a mixin that gets your location and puts it into a url that resolves into a JSON with forecast data. I found the use of a global mixin to be helpful because almost all of my components (would) use this mixin. But it seems as though the import needed for the mixin doesn't work - let me explain.

---- main.js ----

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'
import weathermixin from './components/mixins/weather.js'

createApp(App).mount('#app')`

---- weather.js ----

export default{
    data(){
        return{
            data: {
                weatherData: [{}]
            }
        }
    },
    methods: {
        async getCoordinates(onSuccess, onError){
            if(!navigator.geolocation){
                console.error("Couldn't get coordinates. Press F5 to try again");
            }
            else{
                navigator.geolocation.getCurrentPosition(onSuccess, onError);
            }
        },
        async onSuccess(){
            const {
                latitude,
                longitude
            } = position.coords;
            var userLat = latitude;
            var userLong = longitude;

            const response = await fetch(
                'https://api.open-meteo.com/v1/forecast?latitude=${userLat}&longitude=${userLong}&hourly=temperature_2m,weathercode&daily=weathercode,temperature_2m_max,temperature_2m_min&timezone=Europe%2FBerlin&current_weather=1'
              );
              const responseData = await response.json();
              this.weatherData = responseData;
        
              console.log(this.weatherData);
              return responseData;
        },
        onError(){
            alert("Something went wrong while fetching your coordinates! Press F5 to try again!");
        }
    }
}

I import/ use it in a component with $this.getCoordinates() but where does the syntax error come from? I looked it up and it seems like the right way to implement a global mixin. Why does it give me this error and how do I fix it? Thank you in advance.

Vue / Vite versions: vue: 3.2.37 vue-router: 4.1.2 vitejs/plugin-vue: 3.0.0 vite: 3.0.0