import("../ripple") in type declaration files

[ghost]

There is an issue with the declaration files provided with v0.12.0 where any component that uses the withRipple HOC will have a declaration file that includes import("../ripple"). This causes our type checks to fail since it can't resolve the relative import.

$ tsc
node_modules/@material/react-button/dist/index.d.ts:21:4759 - error TS2307: Cannot find module '../ripple'.

The workaround for anyone having this issue is to add "skipLibCheck": true to your tsconfig.json

[moog16]

@ben-mckernan thanks for opening the issue. This is the react-button/dist/index.d.ts file that I imported from 0.12.0:

import React from 'react';
import { InjectedProps } from '@material/react-ripple';
declare type ButtonTypes = HTMLAnchorElement | HTMLButtonElement;
export interface ButtonProps<T extends ButtonTypes> extends InjectedProps<T>, React.AnchorHTMLAttributes<T>, React.ButtonHTMLAttributes<T> {
    raised?: boolean;
    unelevated?: boolean;
    outlined?: boolean;
    dense?: boolean;
    disabled?: boolean;
    className?: string;
    icon?: React.ReactElement<React.HTMLProps<HTMLOrSVGElement>>;
    href?: string;
    trailingIcon?: React.ReactElement<React.HTMLProps<HTMLOrSVGElement>>;
}
export declare const Button: {
    <T extends ButtonTypes>({ className, raised, unelevated, outlined, dense, disabled, icon, href, children, initRipple, trailingIcon, unbounded, ...otherProps }: ButtonProps<T>): JSX.Element;
    defaultProps: {
        initRipple: () => void;
    };
};
declare const _default: React.ComponentType<Pick<ButtonProps<ButtonTypes>, "download" | "name" | "rel" | "target" | "type" | "accessKey" | "dir" | "draggable" | "hidden" | "lang" | "title" | "id" | "prefix" | "slot" | "children" | "contentEditable" | "inputMode" | "tabIndex" | "href" | "form" | "formAction" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "raised" | "unelevated" | "outlined" | "dense" | "icon" | "trailingIcon" | "hrefLang" | "media" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ...
export default _default;

I see '@material/react-ripple', but no ../ripple. Am I looking at the right file that you're refering to?

[ghost]

It is not at the top of the file but rather at the end of the second to last line, the line starting with declare const _default.

It is cut off in your code snippet. Here is a link to the full file on npm https://unpkg.com/@material/react-button@0.12.1/dist/index.d.ts

[moog16]

Confirmed. This is actually happening for all components that use the withRipple() mixin. I'm not sure why it isn't using the @material/react-ripple import path. This is definitely a bug with the types.

[arichiv]

Still exists in 0.13.0 https://unpkg.com/@material/react-button@0.13.0/dist/index.d.ts

[moog16]

@arichiv yes no one was able to work on this just yet. Do you have time for a PR? :)

[arichiv]

I walked right into that one.

I should have time to write a test to detect this next week. If that uncovers a root cause I would fix it, but I may have to stop there.

[moog16]

Sounds good! Anything is appreciated!

[arichiv]

Ping on review for #900 :-)

[moog16]

Hey! Sorry I was out on vacation and will take a look shortly

[moog16]

Closing for #936