Cannot import default with typescript

Question

There is this library called 'resize-observer-polyfill' which declares that it has a default export:

declare var ResizeObserver: {
  prototype: ResizeObserver;
  new(callback: ResizeObserverCallback): ResizeObserver;
}

export default ResizeObserver;

But I cannot import this library because TS complains.

import ResizeObserver from 'resize-observer-polyfill'

// If I do this instead, TS is happy but ResizeObserver is undefined !!
import * as ResizeObserver from 'resize-observer-polyfill'

TS config extract:

, "compilerOptions":
  { "jsx": "react"
  , "module": "commonjs"
  , "noImplicitAny": true
  , "outDir": "output/dist"
  , "reactNamespace": "JSX"
  , "sourceMap": true
  , "strictNullChecks": true
  , "target": "es6"
  }

Using allowSyntheticDefaultImports makes types and runtime happy but then many imports fail in jest (using ts-jest) unless I set skipBabel to true.

Using the skipBabel option, this import fails in tests with an undefined value, I have to use the import * as ResizeObserver syntax in tests.

What is the proper way to do this ? Why is it such a mess anyway ?

Try import {ResizeObserver} from 'resize-observer-polyfill' — ochs.tobi
– ochs.tobi, Commented Mar 7, 2018 at 12:28
I believe you must declare a module with the same name as the library. — Tao
– Tao, Commented Mar 7, 2018 at 12:34

Coderer · Accepted Answer · 2018-09-17 11:35:13Z

1

Try the first syntax (import ResizeObserver from 'resize-observer-polyfill') with allowSyntheticDefaultImports and esModuleInterop both set to true in your tsconfig.json. You need the former to allow import ResizeObserver instead of import * as ResizeObserver, and I think you may need the latter since you're targeting es6.

I found the release notes for TS 2.7 very helpful in understanding this.

answered Sep 17, 2018 at 11:35

Coderer

27.6k32 gold badges106 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cannot import default with typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related