In my TypeScript app using webpack, I am attempting to utilize css-element-queries/ResizeSensor.
After adding the npm package, which includes a .d.ts file, I encountered an issue when writing the following code:
new ResizeSensor(element, cb);
Instead of generating the correct code:
new ResizeSensor_1(element, cb);
The TypeScript compiler mistakenly creates:
new ResizeSensor_1.default(element, cb);
When in fact, ResizeSensor only returns a single class, so the correct TypeScript code should be:
new ResizeSensor_1(element, cb);
The ResizeSensor.d.ts file defines the structure of the class:
export declare type ResizeSensorCallback = (size: { width: number; height: number; }) => void;
declare class ResizeSensor {
constructor(element: Element | Element[], callback: ResizeSensorCallback);
detach(callback?: ResizeSensorCallback): void;
reset(): void;
static detach(element: Element | Element[], callback?: ResizeSensorCallback): void;
static reset(element: Element | Element[]): void;
}
export default ResizeSensor;
For importing ResizeSensor, I use the following statement:
import ResizeSensor from 'css-element-queries/src/ResizeSensor';
Despite trying various import statements, TypeScript still throws errors. My tsconfig.json file includes these options:
"target": "es5"
and
"module": "amd"
Any suggestions on how to resolve this issue?