*.d.ts different type definition on after npm install on new machine

102 views Asked by At

I have a react project that uses typescript that is maintained in a git repository. I have been working with it in windows and it has always started and built fine. I just got a new mac machine in which I cloned the repository to and ran npm install on. Upon running the application, I get a compilation error on a component from the popular components library antd:

Property 'collapsible' is missing in type '{ children: Element; header: Element; key: number; }' but required in type 'CollapsePanelProps'.  TS2741

    323 |                     resultData.map((result, index) => {
    324 |                       return (
  > 325 |                         <Panel
        |                          ^
    326 |                           header={
    327 |                             <div style={{ width: "100%",display:'flex',flexDirection:'row',alignItems:'center' }}>
    328 |                               <div className="accordionHeaderLabelName">

I don't get this error on my original windows machine. Upon further investigation, the typescript file on the new machine differs from the typescript file on the old machine.

On my old machine, the CollapsePanel.d.ts is:

import * as React from 'react';
export declare type CollapsibleType = 'header' | 'disabled';
export interface CollapsePanelProps {
    key: string | number;
    header: React.ReactNode;
    disabled?: boolean;
    className?: string;
    style?: React.CSSProperties;
    showArrow?: boolean;
    prefixCls?: string;
    forceRender?: boolean;
    id?: string;
    extra?: React.ReactNode;
}
declare const CollapsePanel: React.FC<CollapsePanelProps>;
export default CollapsePanel;

On my new machine, the CollapsePanel.d.ts is:

import * as React from 'react';
export declare type CollapsibleType = 'header' | 'disabled';
export interface CollapsePanelProps {
    key: string | number;
    header: React.ReactNode;
    /** @deprecated Use `collapsible="disabled"` instead */
    disabled?: boolean;
    className?: string;
    style?: React.CSSProperties;
    showArrow?: boolean;
    prefixCls?: string;
    forceRender?: boolean;
    id?: string;
    extra?: React.ReactNode;
    collapsible: CollapsibleType;
}
declare const CollapsePanel: React.FC<CollapsePanelProps>;
export default CollapsePanel;

I haven't made any edits since the npm install, so why would the typescript definitions be different? I have other team members with macs and they are able to install and build the project on their devices. I have verified the antd versions on both systems and the same as well. How can I fix the issues without having to make changes that could create merge conflicts and problems on other systems?

0

There are 0 answers