Why does my Vue/Vite/Typescript application require me to separate "import" and "import type" by default?

Question

I've scaffolded a front-end application using create-vue. It includes TypeScript.

The following throws an error:

import axios, { AxiosInstance, AxiosResponse } from "axios"

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/axios.js?v=a7006e8b' does not provide an export named 'AxiosInstance'

Whereas the following works:

import axios from "axios"
import type { AxiosInstance, AxiosResponse } from "axios"

This is my first time using create-vue, but in other projects in the past I have never had to separate my type imports.

The documentation for verbatimModuleSyntax states:

By default, TypeScript does something called import elision. TypeScript detects that you’re only using an import for types and drops the import entirely.

To be safe, I tried setting "verbatimModuleSyntax": "false" to my tsconfig.json, but this did not fix the issue. It's also flagged in VSCode with the following error:

Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting.

How can I get the failing line (importing both classes and types/interfaces in one line) to work as it always has for me in the past?

EDIT: Note that I'm using axios only as an example. This happens with any type, regardless of whether it's a node module or an interface I've written.

Dimava · Accepted Answer · 2023-08-26 20:04:57Z

4

You need

import axios, { type AxiosInstance, type AxiosResponse } from "axios"

The difference of "type" imports is they get stripped
If they wouldn't get stripped, you would try to import an actual AxiosInstance variable from axios, resulting in a runtime error if so-named variable was not exported from there.
verbatimModuleSyntax disables the stripping of unused non-"type" imports, causing the error

import { a } from './a'
import { type b } from './b'
import type { c } from './c'
import { d, /* type */ e, type f } from './d'
import { /* unused */u, /* type */ w, type y } from './u'
a<b, c, e, d, f, w>(d)


// JS without verbatimModuleSyntax
// import { a } from './a';
// import { d } from './d';
// a(d);

// JS with verbatimModuleSyntax
// import { a } from './a';
// import {} from './b';
// import { d, e } from './d';
// import { u, w } from './u';
// a(d);

answered Aug 26, 2023 at 20:04

Dimava

11.1k1 gold badge13 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Santi Over a year ago

Thank you. Like I mentioned though, I have never had to use a type import at all. Is it a typescript version thing? I'm trying to figure out why all my other projects work fine but this one does not. I've always imported interfaces and classes this way.

Dimava Over a year ago

because with verbatimModuleSyntax they stopped being trimmed @Santi

Santi Over a year ago

Then how do I turn it off...?

Dimava Over a year ago

@Santi you go to tsconfig.json and turn it off

Santi Over a year ago

As I said in the original post, I did that, and it didn't work

|

Daniel Danielecki · Accepted Answer · 2023-12-03 19:31:06Z

2

"verbatimModuleSyntax": "false" doesn't work, but "verbatimModuleSyntax": false worked for me.

answered Dec 3, 2023 at 19:31

Daniel Danielecki

10.9k7 gold badges89 silver badges111 bronze badges

Collectives™ on Stack Overflow

Why does my Vue/Vite/Typescript application require me to separate "import" and "import type" by default?

2 Answers 2

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Related