Cannot find module '~icons/heroicons-outline/cursor-click' or its corresponding type declarations. (typescript)

[ArgekarStudios]

I have installed npm json icons

[replygirl]

@ArgekarStudios duplicate of #119 - fixed in 0.12.23

[cesswhite]

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"]
}

[hi-reeve]

got the same error on the latest 0.12.23

[MrSunshyne]

I was able to resolve this by :

1. Update to 0.12.23
2. Point TS to the correct types

tsconfig.json

compilerOptions : {
types: [
+      "unplugin-icons/types/vue",
 ]
}

[cesswhite]

and for react types?

[josephfh]

@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'

[hspaay]

@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.

[userquin]

@hspaay the readme contains the types for react, just go to https://github.com/antfu/unplugin-icons#configuration and check Frameworks > React entry

[hspaay]

@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?

[userquin]

@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 ;) ).

[hspaay]

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.

[leosin]

nuxt3 + TS4.5.5 It also appears on nuxt3, either in buildModules or vite way

[leishihong]

@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?

配置确实好了

[Inori-Lover]

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

[Forinx]

tsconfig.json

  "compilerOptions": {
    ...
    "types": ["unplugin-icons/types/vue"]     /** Add types unplugin-icons/types/vue**/
  },
  // "include": ["src"],     /** Remove include **/

This works for me

[Oskar-Nilsen-Roos]

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.

[seegwen]

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.

[Blankeos]

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
}

[iBobik]

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.

[Stanzilla]

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?```