Type error: Cannot find name 'ResizeObserver'.

[Justinidlerz]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.11.0

Environment

MacOs10.13.5 (17F77)

Reproduction link

https://github.com/ant-design/ant-design/blob/master/components/input/TextArea.tsx#L46
Sandbox

Steps to reproduce

• create project
• npm install typescript antd ...
• create index.tsx
• npm start

What is expected?

success to start dev server

What is actually happening?

Type error: Cannot find name 'ResizeObserver'.

---

The bug is caused by this pr

The compiled typings file antd/lib/input/TextArea.d.ts no import ResizeObserver

[ant-design-bot]

Hello @Justinidlerz. Please provide a online reproduction by forking this link https://u.ant.design/codesandbox-repro or a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 7 days.

你好 @Justinidlerz, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 此处 创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。7 天内未跟进的 issue 将会被自动关闭。

[SergeyVolynkin]

+1, same issue

Chrome: Version 70.0.3538.102
Mac OS: 10.14.1 (18B75)

[yoyoyohamapi]

+1, same issue

[SergeyVolynkin]

Temp fix:

1. Open: node_modules/antd/lib/input/TextArea.d.ts
2. Insert import: import ResizeObserver from 'resize-observer-polyfill';

[zedfight]

+1, same issue

[Justinidlerz]

I cannot reproduce in CodeSandBox, but always can reproduction in local

[yesmeck]

The temporary fix is putting following interface to your typings/index.d.ts:

interface ResizeObserver {
  observe(target: Element): void;
  unobserve(target: Element): void;
  disconnect(): void;
}

[Justinidlerz]

Okay, thans @yesmack

[raptoria]

+1

[raff-shopify]

+1

[ztplz]

resize-observer-polyfill is inactive for a year. If it hasn't been fixed before tonight, I will send a pr to fix it in Antd.

[tiyee]

+1
It throw the error when I finishing updated the version from 3.10.9 to 3.11.0
and I rollback to the 3.10.9,it is OK

[weswigham]

que-etc/resize-observer-polyfill#45 fixes the polyfill's types, but antd itself can be fixed by adding a /// <reference types="resize-observer-polyfill" /> to the file (to make the dependency on the global patch explicit), as an alternative.

[lazy1523]

+1

+1 same issue

[lichia9527]

+1 same issue

[xyunsh]

+1

[Juniiorf]

+1 same issue

[haitrr]

+1

[gyj963]

+1 same issue

[meibin08]

+1
import ResizeObserver from 'resize-observer-polyfill'

[2999]

+1

[Deleted user]

+1 same issue

[hfknight]

same issue here. can use @SergeyVolynkin 's solution as a temp fix.

[MyJoiT]

+1 same issue. And fix it by @yesmeck 's solution.

[IssueHuntBot]

@issuehuntfest has funded $20.00 to this issue. See it on IssueHunt

[afc163]

Fixed by resize-observer-polyfill@1.5.1 que-etc/resize-observer-polyfill#45

[loweisz]

+1

[ndbroadbent]

@afc163 I am using resize-observer-polyfill@1.5.1, but I'm still seeing this type error. yarn.lock:

resize-observer-polyfill@^1.5.0:
  version "1.5.1"
  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==

$ yarn start
Starting the development server...

Failed to compile.

myapp/node_modules/antd/lib/input/TextArea.d.ts
Type error: Cannot find name 'ResizeObserver'.  TS2304

    18 |     };
    19 |     nextFrameActionId: number;
  > 20 |     resizeObserver: ResizeObserver | null;

My tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "es5",
      "es2015.promise",
      "es2015.symbol",
      "es2015.collection",
      "esnext.array"
    ],
    "allowJs": true,
    "skipLibCheck": false,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  },
  "include": ["src"]
}

Was able to resolve the issue by adding this line to my tsconfig.json:

"files": ["src/**/*.ts", "typings/index.d.ts"]

And I created a file at typings/index.d.ts:

// https://github.com/ant-design/ant-design/issues/13405#issuecomment-443658164
interface ResizeObserver {
  observe(target: Element): void;
  unobserve(target: Element): void;
  disconnect(): void;
}

(Thanks @yesmeck!)

[Deleted user]

@ndbroadbent
Which version of antd do you use currently within your project?
Have you tried to update to to the latest (3.11.2)?

Version 3.11.0 contains a correction for the below issue and for me works properly.
🐞 Fix TextArea use resize observer to check textarea size. #13295

[ndbroadbent]

Oh sorry, I was still on 3.10.5. I should have checked that first! I upgraded to version 3.11.2 and this fixed the issue. (I didn't need to make any changes to tsconfig.json or typings/index.d.ts.)

[marcopicasso]

+1

[ztplz]

Please check the Antd version and make sure the latest version is installed. If problem still exists, please reply here.

[IssueHuntBot]

@zombieJ has rewarded $14.00 to @zombieJ. See it on IssueHunt

• 💰 Total deposit: $20.00
• 🎉 Repository reward(20%): $4.00
• 🔧 Service fee(10%): $2.00

[mmilad]

export declare class ResizeObserver {
  observe(target: Element): void;
  unobserve(target: Element): void;
  disconnect(): void;
}

if you want to do something like
const myObserver = new ResizeObsever..