Error message: 'import not located' when using custom types in Vue 3 with Vite/Vitesse

I'm currently working on a Vue 3 project using Vitesse (which is based on Vite). I created a custom type called ProductData in my src/types.ts file. However, when I try to use this type in one of my pages, the page fails to load and I see multiple console errors stating 

SyntaxError: import not found: ProductData
. I have double-checked the import path, ensured that the type is exported correctly, and even experimented with importing from different locations within ts files, but the issue remains.

Interestingly, I don't encounter any problems importing these types in my store files, only in *.vue files. Any suggestions or insights? I came across this post which mentioned making changes to shims.d.ts and tsconfig.json, but implementing those adjustments didn't resolve the problem.

EDIT: Apologies for missing out on sharing my tsconfig.json. Here it is including additions made by @flydev:

// Additional configurations inspired by https://stackoverflow.com/questions/63724523/how-to-add-typescript-to-vue-3-and-vite-project
{
  "compilerOptions": {
    "baseUrl": ".",
    "module": "ESNext",
    "target": "ESNext",
    "lib": [
      "DOM",
      "ESNext"
    ],
    "useDefineForClassFields": true,
    "strict": true,
    "esModuleInterop": true,
    "incremental": false,
    "skipLibCheck": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "noUnusedLocals": true,
    "strictNullChecks": true,
    "importHelpers": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "noEmit": true,
    "types": [
      "vite/client",
      "vite-plugin-pages/client",
      "vite-plugin-vue-layouts/client"
    ],
    "paths": {
      "~/*": [
        "src/*"
      ]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.js",
    "src/**/*.vue"
  ],
  "exclude": [
    "dist",
    "node_modules"
  ]
}

EDIT 2: Upon switching from Firefox to Chrome and inspecting types.ts under sources, I noticed that the file was empty. The error message has also changed to possibly provide more useful information: 

SyntaxError: The requested module '/src/types.ts' does not provide an export named 'JsonResponse'
.

typescriptvue.js

Answer №1

While browsing through an issue on vitejs/vite, I stumbled upon this particular comment:

It appears that there is a known issue in Vue relating to type imports. The solution seems to be using the import type syntax like so: 

import type { User } from '~/types'

By making the adjustment in my import statement from

import { ProductData } from '~/types'

to

import type { ProductData } from '~/types'

I was able to resolve the problem. Furthermore, after fixing this initial import, I encountered a similar issue with a third-party type, and updating the import for that fixed the issue as well.

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

React Component - Element with an undefined value

When I tried implementing an Ionic Modal as a React Component, I encountered the following error message: Type '({ onClose, tipo }: PropsWithChildren<{ onClose: any; tipo: number; }>) => Element | undefined' is not assignable to type & ...

javascriptreactjstypescriptionic-frameworkfc

Mastering universal code creation with the composition API in Quasar

The Quasar website explains that for writing universal code, the created and beforeCreate lifecycle hooks in Vue components are executed in Server Side Rendering (SSR). This raises a question: What about setup? How can I achieve SSR functionality with th ...

javascriptvue.jsserver-side-renderingquasar-frameworkquasar

Tips for managing variables to display or hide in various components using Angular

In this example, there are 3 main components: The first component is A.component.ts: This is the parent component where an HTTP call is made to retrieve a response. const res = this.http.post("https://api.com/abcde", { test: true, }); res.subscribe((r ...

javascriptangulartypescript

When a variable is used in Postgresql, the ORDER BY clause is disregarded, but accurate results are returned when the variable value is

After investigating, it seems that the query is always returning rows ordered by id, regardless of the value passed in the sortType variable (verified in console). export async function fetchAnimalList(sortType) { noStore(); try { const areas = aw ...

sqltypescriptpostgresqlnext.js

The call does not match any overloads in Vue when using TypeScript

What is the reason behind the occurrence of the error in the ID part of the query? This call does not have a matching overload. <template> <swiper-slide slot="list" v-for="(list, index) in list.banner" :key=" ...

typescriptvue.js

Encountering TypeScript Error when Using Hooks (possible type mismatch?)

Currently, I am developing a custom `useProject` hook in TypeScript that is utilizing a function defined in `useProjectFunctions.ts`. While working on the `useProject` hook, I encountered a TypeScript error indicating type mismatch, although I am unable t ...

typescript

View real-time data in Vuejs 3 as it executes

I am currently working on a form that populates a table with data retrieved from a Laravel API. I am using Vue.js 3 and Composition API to build my entire application. When the button is clicked, I want the table to be filled with data from the form. The b ...

javascriptvue.jsvuejs3vue-composition-api

Grid Column with Checkboxes in Kendo UI for Vue

Seeking help in adding a checkbox column to a Kendo UI Vue grid. The column should display the values of a boolean field from the grid's data source. While I am aware of how to add a checkbox column for selection as demonstrated here: https://www.tele ...

javascriptvue.jskendo-ui

Tips for utilizing a personalized design with the sort-imports add-on in VS Code?

After recently installing the VS Code extension sort-imports, I decided to give a custom style called import-sort-style-module-alias a try. Following what seemed to be the installation instructions (via npm i import-sort-style-module-alias) and updating m ...

typescriptvisual-studio-codepackage.jsonvscode-extensions

What is the most efficient way to dynamically load a script file before proceeding with the rest of the code execution?

In my Angular home.component.ts file, I have added the script loading code as shown below: export class HomeComponent { constructor() { this.loadDynamicScript(); } public loadDynamicScript() { var script = document.createElement(&a ...

angulartypescriptsleepscript-tag

Switch up the data format of a JSON file that is brought into TypeScript

When bringing in a JSON file into a TypeScript project with the resolveJsonModule option activated, the TypeScript compiler can automatically determine the type of the imported JSON file. However, I find this type to be too specific and I would like to rep ...

jsontypescriptimport

The Angular 5 keyup event is being triggered twice

My app is incredibly simple, just a basic hello world. To enhance its appearance, I incorporated bootstrap for the design and ng-bootstrap for the components. Within one of my TS files, you will find the following code: showMeTheKey(event: KeyboardEvent) ...

javascriptangulartypescriptevents

Tips for modifying prop values after they have been initially set in a Component

When working with a Vue component, it is important to remember that setting the 'props' immediately requires updating the collection to include additional properties. The component code is as follows: Vue.component('blog-post', { pr ...

vue.jsvuejs2vue-component

Ways to display or conceal an input based on the chosen option in a select input?

When selecting option 2 in a dropdown list, I want an additional input field to be displayed. As a beginner in Vue.js, I'm unsure of the best approach to achieve this. Should I use an onchange event listener or is there a different method? The data sh ...

vue.js

Next.js developers faced with GraphQL Apollo Client insistence on utilizing cache

Our Apollo Client implementation in Next.js (v14.2.5) SSR using the getClient() method is currently facing an issue where cached data is not being updated with the new data from the server. import { HttpLink } from "@apollo/client"; import { re ...

typescriptnext.jsserver-side-renderingapollo

Establish a Vue application to run on Nginx at port 80 in Raspbian, paired with a Flask backend operating on port 8080

My setup involves Nginx running a Flask-based backend on port 8080 with the following configuration: server { listen 8080 default_server; listen [::]:8080; root /var/www/html; server_name _; location /static { alias /var/www ...

nginxvue.jsraspbian

Issue: unable to establish a connection to server at localhost port 5000 while using Next.js getServerSideProps function

I am experiencing an issue with connecting to an API on localhost:5000. The API works perfectly when called from Postman or the browser, but it does not work when called inside Next.js getserverside props: mport { useEffect,useState } from "react"; i ...

typescriptnext.jsaxios

Developing a databound listview in Ionic: A step-by-step guide

In the world of programming, each platform has its own way of handling lists. For example, Android uses RecyclerView, WPF uses ListView, and in Ionic, we have ion-list. If you have a list of strings like this: Animals:string[] = ["Dog", "Cat", "Human", "C ...

angulartypescriptionic-framework

An unexpected token was encountered by Jest while running a test in a test.tsx file for a React Native project

It seems like many individuals are encountering this particular issue. Despite trying various methods, I am still unable to resolve it. Currently, I am facing the following error in my terminal: FAIL tests/App.test.tsx ● Test suite failed to run Jest ...

typescriptreact-nativejestjsbabeljsts-jest

Can you explain the significance of the syntax provided?

I've been going through the Angular tutorial, but I'm having trouble grasping the significance of this particular code snippet: return (error: any): Observable<T> => {...}; It seems like the function is returning another function, but ...

angulartypescript