Error TS2304: Cannot find name 'ImageCapture' and already installed @types/w3c-image-capture

Question

I'm developing an PWA with Ionic 4 and Angular 7.

I need to access the webcam if it exists and then render in a canvas. In this process I use ImageCapture (https://developer.mozilla.org/en-US/docs/Web/API/ImageCapture).

let constrains = 
{
        audio:false,
        video: 
        {
            frameRate: { ideal: 60, min: 30 },
            facingMode: { ideal: "user" },
            width:  { exact: 626 },
            height: { exact: 720 },
        }
}    

navigator.mediaDevices.getUserMedia(constrains).then(mediaStream => 
{
        this.Webcam.nativeElement.srcObject = mediaStream;

        this.Webcam.nativeElement.play();

        const track = mediaStream.getVideoTracks()[0];

        let ic:ImageCapture = new ImageCapture(track);

        return this.ImageCapture.getPhotoCapabilities();
});

I was getting an error because TypeScript didn't know anything about the ImageCapture, so I installed the typings adding them on my package.json:

npm install --save-dev @types/w3c-image-capture

When building the app with "ionic serve" or "ionic build --prod" I get this error:

ERROR in src/app/pages/photoframe/photoframe-take/photoframe-take.page.ts(26,22): error TS2304: Cannot find name 'ImageCapture'. src/app/pages/photoframe/photoframe-take/photoframe-take.page.ts(117,28): error TS2663: Cannot find name 'ImageCapture'. Did you mean the instance member 'this.ImageCapture'?

If I debug the aplication the ImageCapture has value, so it's only I build problem.

How can I remove this error from my build?

Answer 1

I Came across the same issue in a vue2 project, what I did was

installed the npm package for ImageCapture as a dev dependency https://www.npmjs.com/package/@types/w3c-image-capture

npm install @types/w3c-image-capture --save-dev

which should register it in your package.json file

"devDependencies": {
    "@types/jest": "^24.0.19",

    "@types/w3c-image-capture": "^1.0.2",    
  
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-e2e-nightwatch": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "^1.0.3",
    "chromedriver": "86",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3",
    "vue-cli-plugin-i18n": "~1.0.1",
    "vue-template-compiler": "^2.6.11"
  }

then i had to manually add "w3c-image-capture" to my typscript config (tsconfig.json) file under you guessed it types

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest",
      "webpack",
      "webpack-env",
      "w3c-image-capture"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

and voilia, all was well

Answer 2

I ran into this problem and noticed, thanks to the answer from Joscelyn Jean, that my tsconfig.app.json had a property for types that was an empty array. Deleting that entry resolved my error. Presumably the setting was effectively blocking the ts compiler from looking at the entries in typeRoots in tsconfig.json

My tsconfig.app.json when receiving the error:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [],
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

and then after the fix:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

My base tsconfig.json where typeRoots is set:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "resolveJsonModule": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "esNext",
      "dom"
    ],
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

Answer 3

I don't know if it works with Ionic around but I found that if you add your types in tsconfig.app.json in the types property, it will be recognized by Angular:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": [
      "../node_modules/@types/w3c-image-capture"
    ]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts",
    "**/tests/**/*.ts"
  ]
}