question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

In 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:open
  • Created a year ago
  • Reactions:1
  • Comments:9

github_iconTop GitHub Comments

2reactions
silasabbottcommented, Aug 3, 2022

Update

I was able to get this to work by replacing ~icons/ with virtual: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:

/// <reference types="unplugin-icons/types/svelte" />

and this is the error thrown when trying to build:

[vite:load-fallback] Could not load /Users/silas/Documents/Websites/projectname/~icons/material-symbols/send-outline-rounded (imported by src/lib/components/routes/ContactForm.svelte): ENOENT: no such file or directory, open '/Users/silas/Documents/Websites/projectname/~icons/material-symbols/send-outline-rounded'

Everything works perfectly in development.

2reactions
DamianGlowalacommented, Jun 16, 2022

Update for Nuxt users

The following entry in nuxt.config removed the import errors:

typescript: {
    tsConfig: {
        compilerOptions: {
            types: ["unplugin-icons/types/vue"]
        }
    }
}
Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found