[Bug]: icons-vue: Vue3 app TS check missing type declarations for icons

bobby-driggs commented 2 months ago

Package

@carbon/icons-vue

Browser

Chrome

Package version

10.83.1

React version

Description

When I run my vite type checker: vue-tsc --build ... I get the following errors

error TS7016: Could not find a declaration file for module '@carbon/icons-vue/es/user/24'. 'C:/dev/my-app/web/app/node_modules/@carbon/icons-vue/es/user/24.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/carbon__icons-vue` if it exists or add a new declaration (.d.ts) file containing `declare module '@carbon/icons-vue/es/user/24';`

20 import User24 from '@carbon/icons-vue/es/user/24'

For every icon I am importing.

FWIW: The icons do render properly - this seems to be a pure typing error with TypeScript. This is important as we have a type check on our build server, so i need some way of resolving this.

Workaround: I can set "noImplicitAny": false , in the tsconfig.json options file, but that seems like a nuclear option

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "vite-env.d.ts"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
     ...
    "noImplicitAny": false  // this prevents the rror
  }
}

Reproduction/example

none

Steps to reproduce

Create a new vite application, follow the usage steps here: https://github.com/carbon-design-system/carbon/tree/main/packages/icons-vue#usage

import NOT globally, then try and check typescript build, note all the icons are missing types.

Suggested Severity

None

Application/PAL

No response

Code of Conduct

[X] I agree to follow this project's Code of Conduct
[X] I checked the current issues for duplicate problems

bobby-driggs commented 2 months ago

A better workaround i discovered, based on this old typescript github issue: https://github.com/Microsoft/TypeScript/issues/6615

is to just declare within an type definition file: carbonIcons.d.ts this code:

declare module '@carbon/icons-vue/es/*' {}

which will catch all wildcard import for any icon under that path.

Would love to see a more "native" solution to this problem tho

github-actions[bot] commented 2 weeks ago

This issue has been marked as stale because it has required additional info or a response from the author for over 14 days. When you get the chance, please comment with the additional info requested. Otherwise, this issue will be closed in 28 days.

carbon-design-system / carbon-components-vue