vue-tsc Cannot find module '~icons/ui/info' or its corresponding type declarations.
See original GitHub issueIn our project running Vite and Vue2 (through vue-demi), when running vue-tsc
, we get an error:
ERROR(vue-tsc) Cannot find module '~icons/ui/info' or its corresponding type declarations.
tsconfig:
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"sourceMap": true,
"baseUrl": ".",
"typeRoots": [
"./node_modules/@types",
"./node_modules/unplugin-icons/types"
],
"paths": {
"@/*": ["src/*"]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"src/**/*.d.ts",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
],
"vueCompilerOptions": {
"experimentalCompatMode": 2
}
}
vite.config:
const config = defineConfig(({ mode }) => {
const isProduction = mode === "production";
return {
resolve: {
alias: {
"@": path.resolve(__dirname, "src")
},
dedupe: ["vue-demi"]
},
build: {
minify: isProduction,
manifest: true,
rollupOptions: {
input: "src/main.ts"
}
},
plugins: [
legacy({
targets: ["ie >= 11"],
additionalLegacyPolyfills: ["regenerator-runtime/runtime"]
}),
Vue2(),
checker({
vueTsc: true
}),
Icons({
compiler: "vue2",
customCollections: {
"ui": FileSystemIconLoader(
"./src/assets/icons/ui")
}
})
],
server: {
port: 3333
}
};
});
Icon is src/assets/icons/ui/info.svg
with the following svg-code:
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10Z" fill="currentColor"/>
<path d="M10.47 14.1498C10.46 14.1998 10.455 14.2648 10.455 14.3448C10.455 14.5848 10.545 14.7048 10.725 14.7048C10.805 14.7048 10.89 14.6798 10.98 14.6298C11.08 14.5798 11.22 14.4948 11.4 14.3748L11.595 14.8848C11.425 15.1148 11.16 15.3498 10.8 15.5898C10.45 15.8298 10.005 15.9498 9.465 15.9498C9.005 15.9498 8.645 15.8648 8.385 15.6948C8.135 15.5148 8.01 15.2848 8.01 15.0048C8.01 14.9448 8.015 14.8948 8.025 14.8548L8.415 11.8998L8.835 8.7648L7.995 8.3148L8.115 7.6698L11.01 7.2798L11.4 7.4598L10.47 14.1498ZM10.455 5.9898C10.155 5.9898 9.885 5.8698 9.645 5.6298C9.415 5.3898 9.3 5.1198 9.3 4.8198C9.3 4.4098 9.44 4.0648 9.72 3.7848C10 3.4948 10.37 3.3498 10.83 3.3498C11.18 3.3498 11.46 3.4648 11.67 3.6948C11.88 3.9248 11.985 4.1898 11.985 4.4898C11.985 4.9298 11.855 5.2898 11.595 5.5698C11.335 5.8498 10.955 5.9898 10.455 5.9898Z" fill="#113053"/>
</svg>
I’ve see an other issue that says to add “skipLibCheck: true” to tsconfig, but this has not worked.
Issue Analytics
- State:
- Created a year ago
- Reactions:1
- Comments:9
Top Results From Across the Web
VSCode showing "cannot find module" TS error for .vue import ...
Can anyone explain what this does and why it means that the module (or corresponding type declarations) can now be found? – Daniel...
Read more >vue-tsc - npm
vue -tsc. TypeScript icon, indicating that this package has built-in type declarations. 1.0.18 • Public • Published 12 hours ago.
Read more >ts2307 cannot find module / import "fail" in vue files : WEB-37740
Even though this import is absolutely valid. All compiles, and eslint is not complaining either. I'm using eslint with the @typescript-eslint/parser parser.
Read more >cannot find module 'vite' or its corresponding type declarations
js file? The error you're getting is because TypeScript doesn't know what type should .vue files have. In a new Vue CLI project ......
Read more >TIL: TypeScript | Fix "TS2307: Cannot find module 'src' or its ...
... node_modules/@vue/test-utils/dist/domWrapper.d.ts:5:28 - error TS2307: Cannot find module 'src' or its corresponding type declarations.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Update
I was able to get this to work by replacing
~icons/
withvirtual:icons/
when referencing an icon・・・・・・
I’m experiencing this only in production with SvelteKit/Vite deploying to Vercel. My
global.d.ts
file has this line:and this is the error thrown when trying to build:
Everything works perfectly in development.
Update for Nuxt users
The following entry in
nuxt.config
removed the import errors: