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

ArgekarStudios · 2021-12-07T14:34:16Z

I have installed npm json icons

replygirl · 2021-12-08T20:38:01Z

@ArgekarStudios duplicate of #119 - fixed in 0.12.23

cesswhite · 2021-12-09T20:26:13Z

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 · 2021-12-10T02:38:21Z

got the same error on the latest 0.12.23

MrSunshyne · 2021-12-12T09:37:33Z

I was able to resolve this by :

Update to 0.12.23
Point TS to the correct types

tsconfig.json

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

cesswhite · 2021-12-12T15:39:22Z

and for react types?

josephfh · 2021-12-12T21:08:40Z

@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 · 2021-12-13T16:32:03Z

@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 · 2021-12-13T16:50:25Z

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

hspaay · 2021-12-13T17:45:37Z

@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 · 2021-12-13T17:53:17Z

@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 · 2021-12-13T18:22:46Z

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 · 2022-02-17T12:51:23Z

nuxt3 + TS4.5.5

It also appears on nuxt3, either in buildModules or vite way

leishihong · 2022-03-08T09:17:34Z

@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 · 2022-04-27T02:00:49Z

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 · 2022-04-30T03:41:57Z

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 · 2022-08-30T07:14:38Z

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 · 2023-05-12T10:47:19Z

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 · 2023-08-12T10:12:11Z

Using svelte as well

"@sveltejs/kit": "^1.20.4",
"svelte": "^4.0.5",
"unplugin-icons": "^0.16.5",

I used MrSunshyne's #128 (comment) 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 · 2023-09-29T23:32:24Z

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 · 2023-12-04T01:22:51Z

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

Apparently having them specified in the tsconfig is enough to make VS Code happy, but not enough for vue-tsc. For that to work, we would also need to add the unplugin-icons folder inside node_modules to the `include` option in tsconfig, which didn't feel good. Adding them to the environment seems to do the trick for both though. See: unplugin/unplugin-icons#128 RISDEV-3192

mattrossman mentioned this issue Aug 6, 2023

Render icons on server side in NextJS 13 iconify/iconify#234

Closed

chrisjobando mentioned this issue Oct 1, 2023

SvelteKit Example Broken - Types #308

Open

5 tasks

Blankeos mentioned this issue Oct 14, 2023

vue-tsc Cannot find module '~icons/ui/info' or its corresponding type declarations. #204

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

ArgekarStudios commented Dec 7, 2021 •

edited

replygirl commented Dec 8, 2021

cesswhite commented Dec 9, 2021

hi-reeve commented Dec 10, 2021

MrSunshyne commented Dec 12, 2021

cesswhite commented Dec 12, 2021

josephfh commented Dec 12, 2021

hspaay commented Dec 13, 2021

userquin commented Dec 13, 2021 •

edited

hspaay commented Dec 13, 2021

userquin commented Dec 13, 2021

hspaay commented Dec 13, 2021

leosin commented Feb 17, 2022

leishihong commented Mar 8, 2022

Inori-Lover commented Apr 27, 2022 •

edited

Forinx commented Apr 30, 2022

Oskar-Nilsen-Roos commented Aug 30, 2022

seegwen commented May 12, 2023

Blankeos commented Aug 12, 2023

iBobik commented Sep 29, 2023

Stanzilla commented Dec 4, 2023

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

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

Comments

ArgekarStudios commented Dec 7, 2021 • edited

replygirl commented Dec 8, 2021

cesswhite commented Dec 9, 2021

hi-reeve commented Dec 10, 2021

MrSunshyne commented Dec 12, 2021

cesswhite commented Dec 12, 2021

josephfh commented Dec 12, 2021

hspaay commented Dec 13, 2021

userquin commented Dec 13, 2021 • edited

hspaay commented Dec 13, 2021

userquin commented Dec 13, 2021

hspaay commented Dec 13, 2021

leosin commented Feb 17, 2022

leishihong commented Mar 8, 2022

Inori-Lover commented Apr 27, 2022 • edited

Forinx commented Apr 30, 2022

Oskar-Nilsen-Roos commented Aug 30, 2022

seegwen commented May 12, 2023

Blankeos commented Aug 12, 2023

iBobik commented Sep 29, 2023

Stanzilla commented Dec 4, 2023

ArgekarStudios commented Dec 7, 2021 •

edited

userquin commented Dec 13, 2021 •

edited

Inori-Lover commented Apr 27, 2022 •

edited