Open ArgekarStudios opened 2 years ago
@ArgekarStudios duplicate of #119 - fixed in 0.12.23
Hi, I have the same problem
NodeJS version: 16.13.1
Error images
Files
package.json
{
"name": "react",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"@svgr/core": "^6.1.1",
"@types/react": "^17.0.37",
"@types/react-dom": "^17.0.11",
"@vitejs/plugin-react": "^1.1.1",
"typescript": "^4.5.2",
"unplugin-auto-import": "^0.5.3",
"unplugin-icons": "^0.12.23",
"vite": "^2.7.1"
}
}
vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import Icons from "unplugin-icons/vite";
export default defineConfig({
plugins: [react(), Icons()],
});
tsconfig.json
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": false,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"types": ["unplugin-icons/types/react"],
"include": ["./src"]
}
got the same error on the latest 0.12.23
I was able to resolve this by :
tsconfig.json
compilerOptions : {
types: [
+ "unplugin-icons/types/vue",
]
}
and for react types?
@cesswhite From the readme:
types: [
"unplugin-icons/types/react",
]
Although with this I'm still stuck with a build error on Vite + React :
Cannot find module '~icons/ph/credit-card-bold' or its corresponding type declarations.
import IconCreditCard from '~icons/ph/credit-card-bold'
@MrSunshyne thank you for this, it is missing in the documentation and without it the module '~icons' is not defined. Looks like the installation instructions needs to be updated to include this.
@hspaay the readme contains the types for react
, just go to https://github.com/antfu/unplugin-icons#configuration and check Frameworks > React entry
@userquin found it. It is documented indeed so I stand corrected. Thank you kindly.
As a side note, Webstorm still doesn't recognize the ~icons module even though vscode and the build work fine. My workaround is to add it to a shim file.
// shims-webstorm.d.ts:
declare module '~icons/*' {
import { FunctionalComponent, SVGAttributes } from 'vue'
const component: FunctionalComponent<SVGAttributes>
export default component
}
I can only speculate that webstorm doesn't interpret the compilerOptions 'types' section in tsconfig.json. Even with the shim webstorm can't find the icons via intellisense unfortunately (eg ctrl-space when on the icon name). Nor does vscode. Does this work for others?
@hspaay I use IntelliJ Ultimate Edition and it seems the problem comes from using typescript 4.5, using 4.4.4
version I get it working, so maybe it is a problem with IDEA/WebStorm, or maybe we need to review the types.
I'll add your hint for IDEA/WebStorm/VSCode users to solve the problem (I will also check where is the problem, when I have time ;) ).
Ah good to hear I'm not alone in this. @userquin Thanks for the update.
Maybe there is another factor involved. When forcing typescript to 4.4.4 in package.json, deleting node_modules and rebuilding, the problem with ~icons remains in webstorm. Next, trying this with IntelliJ Ultima the problem remains as well. If I ever find a solution I'll let you know.
nuxt3 + TS4.5.5
It also appears on nuxt3, either in buildModules or vite way
@userquin found it. It is documented indeed so I stand corrected. Thank you kindly.
As a side note, Webstorm still doesn't recognize the ~icons module even though vscode and the build work fine. My workaround is to add it to a shim file.
// shims-webstorm.d.ts: declare module '~icons/*' { import { FunctionalComponent, SVGAttributes } from 'vue' const component: FunctionalComponent<SVGAttributes> export default component }
I can only speculate that webstorm doesn't interpret the compilerOptions 'types' section in tsconfig.json. Even with the shim webstorm can't find the icons via intellisense unfortunately (eg ctrl-space when on the icon name). Nor does vscode. Does this work for others?
配置确实好了
nuxt3 + TS4.5.5
It also appears on nuxt3, either in buildModules or vite way
i think it due to tsconfig.json, by default @vue/cli or other cli have "include", and it will prevent type import from node_modules(even have define in types array
i make this change and it look fine for me
i think that also is why copy the code to the codebase will resolve the problem(if u dont want to change tsconfig, try that way may be a good solution
tsconfig.json
"compilerOptions": {
...
"types": ["unplugin-icons/types/vue"] /** Add types unplugin-icons/types/vue**/
},
// "include": ["src"], /** Remove include **/
This works for me
For anyone still having this issue, referencing unplugin-icon types in your env.d.ts seems to be the solution if you're working from a monorepo structure, like so:
/// <reference types="vite/client" />
/// <reference types="unplugin-icons/types/vue3" />
declare module '*.vue' {
import { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
And then replacing "vue3" with whatever front-end library you're working with.
Using sveltekit, the error shows up in VSCode, and no solution in this thread worked for me.
Adding this:
// Unplugin icons
import type * as Icons from 'unplugin-icons/types/svelte';
export default Icons;
to app.d.ts
removed the error.
Note: The ts error was not preventing the icons from being rendered correctly.
Using svelte as well
"@sveltejs/kit": "^1.20.4", "svelte": "^4.0.5", "unplugin-icons": "^0.16.5",
I used MrSunshyne's https://github.com/antfu/unplugin-icons/issues/128#issuecomment-991863940 solution over here but with svelte instead. Works great!
{
"extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": {
"allowJs": true,
"checkJs": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
+ "types": ["unplugin-icons/types/svelte"]
}
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
//
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
// from the referenced tsconfig.json - TypeScript does not merge them in
}
If anyone has landed here because of Cannot find module '~icons…
error and have v0.17.0 with Nuxt:
New version adding "unplugin-icons/types/vue"
to the compilerOption automatically. If you added it manually with older versions, now it is there twice, so just remove it from your tsconfig.json or nuxt.config.ts.
Using vue3/vite, do we have to define ~icons somehow or should that work automatically? I'm stuck here as well with
2:21:32 AM [vite] Pre-transform error: Failed to resolve import "~icons/mdi/download" from "src/components/LandingPage.vue". Does the file exist?
2:21:33 AM [vite] Pre-transform error: Failed to resolve import "~icons/mdi/error" from "src/components/UI/RefreshButton.vue". Does the file exist?
2:21:33 AM [vite] Pre-transform error: Failed to resolve import "~icons/mdi/error" from "src/components/UI/RefreshButton.vue". Does the file exist?
2:21:33 AM [vite] Pre-transform error: Failed to resolve import "~icons/mdi/error" from "src/components/UI/StopMotionSettings.vue". Does the file exist?
2:21:33 AM [vite] Pre-transform error: Failed to resolve import "~icons/mdi/error" from "src/components/UI/StopMotionSettings.vue". Does the file exist?
2:21:33 AM [vite] Internal server error: Failed to resolve import "~icons/mdi/download" from "src/components/LandingPage.vue". Does the file exist?```
I have installed npm json icons