TypeScript does not provide default export

Question

I have problems with Laravel + Vite + Vue 3 project. I have installed everything as documentation and needed, and this project works separated from Laravel and Vite. But here is the problem, TypeScript doesn't recognize export default. It's always giving an error like:

MainLayout.vue:42 
        
       Uncaught SyntaxError: The requested module '/resources/scripts/composable/Auth.js' does not provide an export named 'default' (at MainLayout.vue:42:1)

But the Auth.ts file has exported function, and it looks like:

export default function useAuth(){
    return {
    CurrentUserToken: 'test';
  };
}

This is how I'm calling in some files (example)

import useAuth() from './Auth';

const { CurrentUserToken } = useAuth();


return CurrentUserToken;

Why it would not recognize this named function?

Answer 1

You can export it like this

export function useAuth() {
    return {
    CurrentUserToken: 'test';
  };
}

Import

import { useAuth } from './Auth';

Execute the function

useAuth();

OR

If you want to export default

export default function() {
    return {
     CurrentUserToken: 'test';
  };
}

And import would look like this

import useAuth from './Auth';

Execute the function

useAuth();