Fix - Cannot find name 'ResizeObserver' error in TypeScript

avatar

Borislav Hadzhiev

Sun Mar 13 20221 min read

banner

Photo by Riccardo Mion

Fix - Cannot find name 'ResizeObserver' error in TypeScript #

To solve the error "Cannot find name 'ResizeObserver'", add the DOM string to your lib array in tsconfig.json and make sure to install the typings for ResizeObserver, by running npm i -D @types/resize-observer-browser and add them to your types array in tsconfig.json.

cannot find name resizeobserver

The first thing you need to do is make sure you have added DOM to your lib array in tsconfig.json.

tsconfig.json
{ "compilerOptions": { "lib": [ "es2017", "DOM" // ... your other libs ], // ... your other options } }

The DOM string has to be in your lib array to get typings for browser APIs.

If it didn't resolve your error, install typings for ResizeObserver by opening your terminal in your project's root directory and running the following command.

index.ts
npm i -D @types/resize-observer-browser

Once the types for ResizeObserver are installed, we have to add them in our types array in tsconfig.json.

tsconfig.json
{ "compilerOptions": { "lib": [ "es2017", "DOM" // ... your other libs ], "types": ["resize-observer-browser"], // ... your other options } }

Once you have added the types for ResizeObserver in the types array, the error should be resolved.

index.ts
const resizeObserver = new ResizeObserver((entries) => { console.log(entries); });

If the error is not resolved, try to delete your node_modules and package-lock.json files, re-run npm install and restart your IDE.

shell
rm -rf node_modules package-lock.json npm install

Make sure to restart your IDE if the error still persists. VSCode glitches often and a reboot solves things sometimes.

Use the search field on my Home Page to filter through my more than 1,000 articles.