ReScript, TypeScript: How to generate bindings of ReactDOM.Style.t for tsx?

,
1

I am gradually rewriting an application with React to TypeScript into ReScript.
I’ve already implemented few components in ReScript, but this is the first one, where I use ReactDOM.Style.t as property to my component.

Here is my minimized component code:

@genType
@react.component
let make = (~sx: option<ReactDOM.Style.t>=?) => {
  <div></div>
}

ReScript compiles fine (except a warning that sx is not used, but we can ignore it).

I have the following bs.js generated, which seems to be fine:

// Generated by ReScript, PLEASE EDIT WITH CARE

import * as React from "react";

function InhypedIcon(Props) {
  return React.createElement("div", undefined);
}

var make = InhypedIcon;

export {
  make ,

}
/* react Not a pure module */

And the following corresponding .gen.tsx file, which causes the problem:

/* TypeScript file generated from InhypedIcon.res by genType. */
/* eslint-disable import/first */


import * as React from 'react';

// @ts-ignore: Implicit any on import
import * as InhypedIconBS__Es6Import from './InhypedIcon.bs';
const InhypedIconBS: any = InhypedIconBS__Es6Import;

import type {Style_t as ReactDOM_Style_t} from '@rescript/react/src/ReactDOM.gen';

// tslint:disable-next-line:interface-over-type-literal
export type Props = { readonly sx?: ReactDOM_Style_t };

export const make: React.ComponentType<{ readonly sx?: ReactDOM_Style_t }> = InhypedIconBS.make;

This does not compile, I am getting TypeScript error:

TypeScript error in /app/src/icons/InhypedIcon.gen.tsx(11,48):
Cannot find module '@rescript/react/src/ReactDOM.gen' or its corresponding type declarations.  TS2307

     9 | const InhypedIconBS: any = InhypedIconBS__Es6Import;
    10 |
  > 11 | import type {Style_t as ReactDOM_Style_t} from '@rescript/react/src/ReactDOM.gen';
       |                                                ^
    12 |
    13 | // tslint:disable-next-line:interface-over-type-literal
    14 | export type Props = { readonly sx?: ReactDOM_Style_t };

I do understand, that TS can not find rescript/react/src/ReactDOM.gen, however I am not really know why.
Any ideas how this can be fixed?

My package versions:

node: v16.6.2

"typescript": "^4.1.2"
"rescript": "^9.1.4"
"@rescript/react": "^0.10.3"

Thank you.

2

This is because rescript bindings to react do not come with GenType, so in case you want it, you have to type it yourself:

@genType.import(("react", "CSSProperties"))
type reactStyle = ReactDOM.Style.t

@genType
@react.component
let make = (~sx: option<reactStyle>=?) => {
  <div></div>
}

This should work.

2 Likes
3

Thank you! This works indeed!