Skip to content

Instantly share code, notes, and snippets.

@frantic
Last active August 20, 2017 17:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save frantic/9649f9fd90f5d40629f21c8a35f4775d to your computer and use it in GitHub Desktop.
Save frantic/9649f9fd90f5d40629f21c8a35f4775d to your computer and use it in GitHub Desktop.
Problem with Flow React HoC with cross modules deps
[ignore]
[include]
[libs]
[lints]
[options]
node_modules
// @flow
// All code in one file - everything works
const React = require('react');
function injectProp<Props: {}>(
Component: React.ComponentType<{ foo: number } & Props>,
): React.ComponentType<Props> {
return function WrapperComponent(props: Props) {
return <Component {...props} foo={42} />;
};
}
class MyComponent extends React.Component<{
a: number,
b: number,
foo: number,
}> {}
const MyEnhancedComponent = injectProp(MyComponent);
<MyEnhancedComponent a={1} b={2} />;
// @flow
// 01. Code in separate files - doesn't work
const React = require('react');
function injectProp<Props: {}>(
Component: React.ComponentType<{ foo: number } & Props>,
): React.ComponentType<Props> {
return function WrapperComponent(props: Props) {
return <Component {...props} foo={42} />;
};
}
module.exports = injectProp;
// @flow
// 02. Code in separate files - doesn't work
const React = require('react');
const injectProp = require('./hoc');
class MyComponent extends React.Component<{
a: number,
b: number,
foo: number,
}> {}
module.exports = injectProp(MyComponent);
{
"dependencies": {
"flow-bin": "^0.53.1"
}
}
// @flow
// 03. Code in separate files - doesn't work
const React = require('react');
const MyEnhancedComponent = require('./mycomp');
/*
$ flow
Error: usage.js:6
6: <MyEnhancedComponent a={1} b={2} />;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React element `MyEnhancedComponent`
v
6: class MyComponent extends React.Component<{
7: a: number,
8: b: number,
9: foo: number,
10: }> {}
^ property `foo`. Property not found in. See: mycomp.js:6
6: <MyEnhancedComponent a={1} b={2} />;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ props of React element `MyEnhancedComponent`
*/
<MyEnhancedComponent a={1} b={2} />;
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
flow-bin@^0.53.1:
version "0.53.1"
resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.53.1.tgz#9b22b63a23c99763ae533ebbab07f88c88c97d84"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment