Props as types instead of interfaces are not supported

[forabi]

This example is based on the one in this project.

How to reproduce?

Add new file, FlippableImage.tsx:

import * as React from 'react';

export interface Props extends React.HTMLAttributes<HTMLImageElement> {
  /** whether the image is flipped horizontally */
  isFlippedX?: boolean;
  /** whether the image is flipped vertically */
  isFlippedY?: boolean;
}

/** An enhanced image component */
export const FlippableImage = (props: Props) => {
  const {
    src,
    isFlippedX = false,
    isFlippedY = false,
    style,
    ...rest,
  } = props;

  let transform = '';
  if (isFlippedX) {
    transform += ` scale(-1, 1)`;
  }
  if (isFlippedY) {
    transform += ` scale(1, -1)`;
  }

  return (
    <img
      src={src || undefined}
      style={{ ...style, transform }}
      {...rest}
    />
  );
};

export default FlippableImage;

This works as intended. However, when using type instead of interface, like this:

export type Props = React.HTMLAttributes<HTMLImageElement> & {
  /** whether the image is flipped horizontally */
  isFlippedX?: boolean;
  /** whether the image is flipped vertically */
  isFlippedY?: boolean;
}

I get the following error:

Error in ./components/FlippableImage.tsx
Module build failed: TypeError: Cannot read property 'methods' of null
 @ ./~/react-styleguidist/loaders/styleguide-loader.js!./~/react-styleguidist/lib/index.js 26:29-276
 @ ./~/react-styleguidist/lib/index.js
 @ multi ./~/react-styleguidist/lib/index ./~/react-dev-utils/webpackHotDevClient.js

[pvasek]

Thanks, for complete repro guide. What should be the properties of that intersection type? Only the isFlippedX, isFlippedY or also those defined in React.HTMLAttributes<>?

Is there any reason to define it as an intersection type?

[forabi]

The properties should be isFlippedX, isFlippedY and all the standard attributes of <img> (defined as React.HTMLAttributes<HTMLImageElement>. However Styleguidist does not show the standard attributes even when using interface ... extends ....

It is just a convention I follow, it is equivalant to the interface type.

[pvasek]

This should be fixed in v0.0.12 release. Can you confirm that?

[forabi]

Yes, types now work. Thank you!
However I am getting a new issue. #31.