Default exports are not supported in TypeScript

Question

Default exports are not supported in TypeScript

I'm encountering issues with my Laravel + Vite + Vue 3 project. I followed the installation instructions in the documentation and everything works fine when the project is separated from Laravel and Vite. However, I'm facing a problem where TypeScript doesn't recognize the export default, resulting in an error message like this:

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)

Even though the Auth.ts file exports a function as shown below:

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

This is how I've tried to call the function in some files:

import useAuth() from './Auth';

const { CurrentUserToken } = useAuth();


return CurrentUserToken;

I'm puzzled as to why it's unable to recognize this named function. Any insights on how to resolve this issue?

javascript typescript vue.js vite

Answer 1

Answer №1

To export the function, follow these steps:

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

Next, import the function:

import { useAuth } from './Auth';

Now, you can execute the function by calling:

useAuth();

Alternatively, if you prefer to export it as default:

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

For importing the default function, use the following syntax:

import useAuth from './Auth';

Finally, execute the function like this:

useAuth();

Answer 2

To export the function, follow these steps:

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

Next, import the function:

import { useAuth } from './Auth';

Now, you can execute the function by calling:

useAuth();

Alternatively, if you prefer to export it as default:

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

For importing the default function, use the following syntax:

import useAuth from './Auth';

Finally, execute the function like this:

useAuth();

Default exports are not supported in TypeScript

Answer №1

Similar questions

Tips for customizing MUI PaperProps using styled components

Failed submission: XMLHttpRequest and FormData not processing data correctly

Tips for resolving problems with vue-transitions not being activated or triggered by methods

Navigating the world of gtag and google_tag_manager: untangling

Struggling to compile SASS in VueJS with WebpackSimple?

Why is it that the edit or delete button is not functioning when I attempt to click on the next page?

vue-router: display distinct views for the same route depending on the specified condition

Issue encountered when summing numbers: There appears to be a continuous loop updating within a component's rendering function

Retrieve HTML content from a JSON object and render it on a web page

What is the proper way to specify a file destination in React?

Ways to eliminate duplicate objects from an array using Angular 6

ReactJS form submissions failing to detect empty input values

Transfer text between Angular components

Guide to incorporating trading-vue-js into a Vue CLI project

Having trouble populating the input text field with the selected value from a dropdown using JavaScript

Is there a way to loop through objects in Angular 2

What is the best way to dynamically populate a table with JSON data that is received from an API response?

Developing a vue.js component library without the need for constant rebuilding after every edit

Is it true that DOM objects in JavaScript are considered objects?

Struggling to update the position of an array and dynamically show its contents using Angular