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.
"verbatimModuleSyntax": "false" doesn't work, but "verbatimModuleSyntax": false worked for me.