Encountering TS2614 error in Vue 3 with TypeScript: Module "*.vue" does not export any members

I am attempting to create a named export in one of my components like so:

export interface ITest { t: String }

in order to use it in another component:

import { ITest } from '@/components/Test.vue'

However, I am encountering this error:

TS2614: Module '"*.vue"' has no exported member 'ITest '. Did you mean to use 'import ITest from "*.vue"' instead?

When I change the import statement to:

import ITest from '@/components/Test.vue'

The error message changes to:

Module '"(path)/Test.vue"' has no default export. Did you mean to use 'import { ITest } from "(path)/Test.vue"' instead?

Could someone please provide guidance on how to achieve named exports in Vue using TypeScript?

This project is built with Vue 3, TypeScript, and Webpack 5.

typescriptvue.jswebpackexportvuejs3

Answer №1

Avoid exporting within the setup section.

Here's an example that works:

<script lang="ts">
export interface ITest { t: string }
</script>

I also had the same question but couldn't find any solutions until I figured it out on my own.

If you check your shims-vue.d.ts, you might notice that it analyzes the setup block to deduce the definition of a component silently.

In other words, when the setup block defines the type 

DefineComponent<{}, {}, any>
, there may be limitations in exporting static types. So, experimenting with exporting it in a pure script block resolved the issue for me.

Answer №2

export interface ITest { 
  t: string; 
}
  • Rename Test.vue to Test.ts, and update the import statement accordingly.
  • Convert type String to TypeScript type string

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The newDragSource() function is not functioning properly within golden-layout version 2.6.0

We are currently in the process of migrating from golden-layout version 1.5.9 to version 2.6.0 within a large Angular 16 production application, albeit slowly and somewhat painfully. Within our application, there exists a dropdown menu that displays the n ...

typescriptdrag-and-dropangular16golden-layout

Changing Enum Value to Text

In my enum file, I have defined an object for PaymentTypes: export enum PaymentTypes { Invoice = 1, CreditCard = 2, PrePayment = 3, } When I fetch data as an array from the database, it also includes PaymentType represented as numbers: order: ...

javascripttypescriptenums

Persistent notification that just won't disappear

I've been working on improving my Notification Component in React. import React, { useEffect, useState } from "react"; import { IoMdClose } from "react-icons/io"; export type NotificationValueType = { message: string; type: & ...

reactjstypescripttailwind-css

What is the best way to transfer parameters from the Vue root to a component?

Currently, I am attempting to transfer a string value from index.cshtml to the main Vue element. The specific parameter I want to pass is: userId Location: Index.cshtml (this is where the parameter is obtained) @using Microsoft.AspNetCore.Identity @inje ...

javascriptvue.jsasp.net-identity

Creating a new function within the moment.js namespace in Typescript

I am attempting to enhance the functionality of the moment.js library by adding a new function that requires a moment() call within its body. Unfortunately, I am struggling to achieve this. Using the latest version of Typescript and moment.js, I have sear ...

javascriptangulartypescriptmomentjs

An issue encountered in the axios package of vue.js, specifically with the error message "id=[object%20Object]"

I am facing an issue where I have an id called "test" as a parameter and I pass it to the index.js store. The error I see in the console is users?id=[object%20Object]. I tried converting the id with this.id.toString(), but unfortunately, it did not resolve ...

javascriptvue.jsaxiosvuetify.js

`Can you provide guidance on implementing Vuex async actions and mutations for authentication?`

My current project involves using Vuex and Axios for authentication. I am working on ensuring that the user remains logged in even when refreshing the browser by utilizing localStorage, although I understand that this method may not be the most secure opti ...

vue.jsauthenticationasynchronousaxiosvuex

Maximizing the potential of mouse positioning in Angular

I am working with an Angular form that has a textarea <textarea class="form-control" id="message" formControlName="message" (fo ...

javascriptangulartypescript

Is there a way to determine the most recent Typescript target compatibility for every Node version?

When using any version of Node, how can I identify the appropriate Typescript Compiler Option for target that offers the most functionality? I want to eliminate any guesswork. Specify the ECMAScript target version as: "ES3" (default), "ES5", "ES6"/"ES20 ...

node.jstypescriptcompiler-optionsecma

Encountered difficulty retrieving properties from the req.query object within expressjs

My setup includes a router configuration like this: router.get('/top-5-cheap', aliasTopTours, getAllTours); I've also implemented some middlewares: Middleware aliasTopTours: In this middleware, I am setting certain properties on the reque ...

node.jstypescriptexpress

Learn how to deactivate the pause button with just one click and re-enable it once the popup appears using Angular2 and Typescript

Can anyone assist with solving an issue I am facing with a timer and a pause button? I need the pause button to be disabled once clicked, until a popup appears, then it should become enabled again. My code snippet is provided below: HTML: <button md-i ...

javascripthtmlangulartypescript

Discovering the Vue app container div attribute

I am currently working on a Java app that generates pages server-side based on certain data, such as a publisher for a specific entity. I want to develop a reusable Vue component that can call an API method to request data about the entity that is being vi ...

javascriptvue.jscomponents

React Typescript Context state isn't refreshing properly

Struggling to modify my context state, I feel like I'm overlooking something as I've worked with context in the past. The challenge lies in changing the 'isOpen' property within the context. You can view my code here: CodeSand **app.ts ...

reactjstypescriptreact-hooksreact-context

Struggling with storing information in a variable of type index

I devised a couple of interfaces to structure my data, as illustrated below: export interface BindingItem{ [property:string] : BehaviorSubject<string>; } export interface BindingObject{ [library:string] : BindingItem; } Within my service file, I h ...

angulartypescript

Refresh the child component whenever there is a change in the parent's state

As of now, I am in the process of developing a MultiCheckbox Component which looks like this: Checkbox.tsx import './Checkbox.scss'; import React, {ChangeEvent, Component} from 'react'; /* * Description of Checkbox properties */ in ...

reactjstypescriptcomponents

Displaying various Vue components within Laravel 6.x

After diving into Laravel and Vue, I managed to put together a navigation component as well as an article component. The problem I'm facing is that although my navigation vue component is visible, the article component seems to be missing. Reviewing ...

javascriptlaravelvue.jsvuejs2laravel-blade

Tips for creating an endless scrolling/loader feature in Nuxt?

Hey there! I am looking to display data after implementing infinite loading. The data is sent asynchronously using asyncData to the page with an ID. Page <script> export default { async asyncData({ $axios, store }) { const customerId = store.g ...

javascriptvue.jsnuxt.js

Mat backspin dialogue spinner

Our current setup involves using a progress spinner for each API call. The spinner is registered at the app module level, but we are facing an issue where the spinner hides behind the dialog popup. In order to solve this problem, we have decided to includ ...

angulartypescriptdialogangular-materialangular-material2

What is the best way to define a typescript interface as a class property?

Here is an example of how I have defined an interface: export interface Donor{ donorName: string; donorId: string; donorPassword:string donorAge: number fitnessReport: string physicianApproval: string } In the following class, I w ...

typescriptclassinterface

Checking at compile time whether a TypeScript interface contains one or multiple properties

Is there a way to determine if a typescript interface contains at least one property at compile time without knowing the property names? For example, with the interfaces Cat and Dog defined as follows: export type Cat = {}; export type Dog = { barking: bo ...

typescriptconditional-types