Encountering TS9006 error while working on a Vue2 Vite project with a combination of TypeScript and

I am in the process of updating an older Vue2 webpack (JS) project to Vite, which involves a mix of JS and TS. Additionally, I am transitioning from using Vuex to Pinia.

store.ts

interface UserLoginRequestI {
    emailOrUsername?: string;
    password?: string;
}

async login({ emailOrUsername, password }: UserLoginRequestI = {}) {
...
}

Login.vue (still JS)

import i18n from './dictionary';
import { useAuthStore } from '@/plugins/auth/store';
import { mapActions, mapState } from 'pinia';
...
methods: {
        ...mapActions(useAuthStore, ['login']),
    },

The issue I am facing involves receiving an error on the first import that states:

Declaration emit for this file requires using private name 'UserLoginRequestI' from module '"./store/index"'. An explicit type annotation may unblock declaration emit.ts(9006)

Any assistance or guidance would be greatly appreciated!

Answer №1

It seems I overlooked adding the "export" keyword before the interface forUserLoginRequestI.

store.ts

export interface UserLoginRequestI {
    emailOrUsername?: string;
    password?: 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

Is there a more efficient approach to creating a Typescript XML parser that does not rely on PropTypes?

I'm currently designing the architecture for a web application that will require the consumption of SOAP APIs in hundreds, if not thousands, of instances. These implementations will be developed by 200-300 different developers over a span of several y ...

Learn how to retrieve the return data from two combined objects using Angular's TypeScript syntax

I've encountered an issue with TypeScript syntax, specifically when a WebAPI returns a DTO containing two objects. The object being returned looks like this: { "userList": [{ "id": 1, "firstNm": "John", "lastNm": "Doe" }, ...

Error message stating that VueRouter is not defined during karma unit tests

I'm encountering warnings during the tests on my new Vue.js project. Whenever a component utilizes the router, either in the template as a <router-link> or programmatically as this.$router.push('/'); The tests are passing but these wa ...

(TS 2556) I'm puzzled as to why a type error is being thrown for a spread argument that was clearly defined and passed as a rest parameter

function debouncePromise<TParams extends Array<unknown>, TRes>( fn: (a: TParams) => Promise<TRes>, time: number, ) { let timerId: ReturnType<typeof setTimeout> | undefined = undefined; return function debounced(...args: TP ...

unable to store user input in a REST API using the store functionality

Welcome to my main page! Here, I have a form that I am looking to connect with an API in order to store the entered data: <div> <span>User ID</span> <input type="text" v-model="info.userId"> </div> <br> <div> ...

RangeError: The React application has surpassed the maximum stack size limit, causing an error to be thrown

Hey there, I could use a hand. I'm fairly new to React and attempting to develop an application for managing contacts by adding them to Local Storage and deleting them. Below is the code snippet from my App.js file: import React, {useState, useEffect} ...

Leveraging ts-loader alongside strip-loader in Webpack

I am currently facing an issue with strip-loader in my Typescript project that is built with Webpack. The ts-loader statement in my project is as follows: { test: /\.ts$/, loader: 'babel-loader?presets[]=es2015!ts-loader' } Everything see ...

Utilize @types for the Typescript npm library without the need for downstream projects to install this dependency

Our npm library package, built in TypeScript and known as lib-utils, provides a range of utilities for other projects to leverage. One of the dependencies within lib-utils is d3, which is both a peerDependency and a devDependency. Additionally, there is a ...

Bug with IOS double tap on Element UI VueJS select input element

Encountering a strange problem on iOS safari or chrome. When attempting to select an option from a dropdown input, the options show up correctly on the first tap, but when trying to actually select an option, it requires two taps to work properly. This is ...

Loading an Angular2 app is made possible by ensuring that it is only initiated when a DOM element is detected

In my main.ts file, the code below is functioning perfectly: import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule); H ...

Using Rollup alongside Typescript to handle absolute imports for type declarations

In the process of creating a React component library, the project structure resembles the following: src/ components/ utils/ hooks/ Currently, there is an attempt to generate type files (.d.ts) using rollup. The types are successfully generated, ...

What is the method to access an interface or type alias that has not been explicitly exported in TypeScript type definitions?

I am looking to create a new class that inherits from Vinyl. The constructor in the superclass takes a single parameter of type ConstructorOptions. export default class MarkupVinylFile extends Vinyl { public constructor(options: ConstructorOptions) { ...

Incorporating traditional Javascript classes for modeling in React development

Can traditional JavaScript classes be utilized in models within the MVC framework while using React, as opposed to relying on Redux or contexts & reducers which may impact reusability? If this approach is feasible, how can we efficiently 'subscribe&ap ...

The content will only be visible when a comment is added and then removed

Currently, I am in the process of implementing an expansion panel that triggers an API call upon being clicked. This call then populates the v-card and v-layout components with the response data. However, a challenge I am encountering is that initially, th ...

Can property overloading be achieved?

Can functions be overloaded in the same way properties can? I'm interested in overloading properties to have separate documentation for different types passed to them. Currently, both values are set to the same value but I need distinct JSDoc for dif ...

Angular - Showing validation messages post successful execution of two functions

I have encountered an issue with my form submission process involving two functions. When both functions succeed, I want to display a successful validation message. However, currently the success message is displayed even if the second function fails. How ...

The lack of invocation of Angular 4's ngOnInit function following a call to router

In my Angular application, I have 3 tabs where one tab displays a table listing employees. Initially, everything works well when the data is loaded for the first time in ngOnInit using an HTTP get request. However, after adding a new employee through a for ...

When reloading a page in Vue.js, I noticed that the database reverts to the old version. What could be causing this issue in Vue.js

https://i.sstatic.net/5MYHH.pngI am facing an issue with my Vue.js 2 project. When a user makes changes on the website, it gets saved to the database successfully. However, when the user reloads the page, they see the unchanged version instead of the updat ...

Adding a button to the right of a text-field input in Vuetify app

I need advice on the best way to use Vuetify in order to display a button to the right of a text-field (attached). I've checked the main site for information but couldn't find anything related to this specific scenario. https://i.sstatic.net/Pp ...

Populate Vue components dynamically without the need for additional frameworks like Nuxt in Vue3

My goal is to develop a checksheet application using Vue, where the tasks are specified in an excel file. ===== To start, task A needs to be completed. Followed by task B. and so on... ===== I am considering creating a CheckItem.vue component fo ...