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

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?

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