Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

FunctionComponent.Of syntax is not working #65

Open
Neftedollar opened this issue Jun 24, 2019 · 6 comments
Open

FunctionComponent.Of syntax is not working #65

Neftedollar opened this issue Jun 24, 2019 · 6 comments

Comments

@Neftedollar
Copy link

Hey!
Here is syntax for stateful components.
And I've tried to use it with component AppBar. Unfortunately, it's not working but compiles.

Fable.Compiler 2.3.3
Fable.MaterialUI (4.1)

here is example

errors in the browser console:

webpack-internal:///./node_modules/react/node_modules/prop-types/checkPropTypes.js:19 Warning: Failed prop type: Invalid prop `children` supplied to `ForwardRef(Typography)`, expected a ReactNode.
    in ForwardRef(Typography) (created by WithStyles(ForwardRef(Typography)))
    in WithStyles(ForwardRef(Typography))
    in div (created by ForwardRef(Toolbar))
    in ForwardRef(Toolbar) (created by WithStyles(ForwardRef(Toolbar)))
    in WithStyles(ForwardRef(Toolbar))
    in header (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ForwardRef(AppBar))
    in ForwardRef(AppBar) (created by WithStyles(ForwardRef(AppBar)))
    in WithStyles(ForwardRef(AppBar))
    in div
    in Unknown (created by WithStyles(Component))
    in WithStyles(Component)
    in Unknown (created by Elmish_HMR_Common_Components_LazyView)
    in div (created by Elmish_HMR_Common_Components_LazyView)
    in Elmish_HMR_Common_Components_LazyView
printWarning @ webpack-internal:///./node_modules/react/node_modules/prop-types/checkPropTypes.js:19
checkPropTypes @ webpack-internal:///./node_modules/react/node_modules/prop-types/checkPropTypes.js:82
validatePropTypes @ webpack-internal:///./node_modules/react/cjs/react.development.js:1666
createElementWithValidation @ webpack-internal:///./node_modules/react/cjs/react.development.js:1755
WithStyles @ webpack-internal:///./node_modules/@material-ui/styles/esm/withStyles/withStyles.js:87
renderWithHooks @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:12938
updateForwardRef @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:14457
beginWork @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:15661
performUnitOfWork @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:19312
workLoop @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:19352
renderRoot @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:19435
performWorkOnRoot @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20342
performWork @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20254
performSyncWork @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20228
requestWork @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20097
scheduleWork @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:19911
scheduleRootUpdate @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20572
updateContainerAtExpirationTime @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20600
updateContainer @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20657
ReactRoot.render @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20953
legacyRenderSubtreeIntoContainer @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21105
render @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21155
(anonymous) @ webpack-internal:///./.fable/Fable.Elmish.React.3.0.1/react.fs:29
webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:55 Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {0, 1, 2, 3}). If you meant to render a collection of children, use an array instead.
    in h6 (created by ForwardRef(Typography))
    in ForwardRef(Typography) (created by WithStyles(ForwardRef(Typography)))
    in WithStyles(ForwardRef(Typography))
    in div (created by ForwardRef(Toolbar))
    in ForwardRef(Toolbar) (created by WithStyles(ForwardRef(Toolbar)))
    in WithStyles(ForwardRef(Toolbar))
    in header (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ForwardRef(AppBar))
    in ForwardRef(AppBar) (created by WithStyles(ForwardRef(AppBar)))
    in WithStyles(ForwardRef(AppBar))
    in div
    in Unknown (created by WithStyles(Component))
    in WithStyles(Component)
    in Unknown (created by Elmish_HMR_Common_Components_LazyView)
    in div (created by Elmish_HMR_Common_Components_LazyView)
    in Elmish_HMR_Common_Components_LazyView
    at invariant (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:55:15)
    at throwOnInvalidObjectType (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:11833:5)
    at reconcileChildFibers (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:12607:7)
    at reconcileChildren (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:14402:28)
    at updateHostComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:14863:3)
    at beginWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:15649:14)
    at performUnitOfWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:19312:12)
    at workLoop (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:19352:24)
    at HTMLUnknownElement.callCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:149:14)
    at Object.invokeGuardedCallbackDev (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:199:16)
invariant @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:55
throwOnInvalidObjectType @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:11833
reconcileChildFibers @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:12607
reconcileChildren @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:14402
updateHostComponent @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:14863
beginWork @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:15649
performUnitOfWork @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:19312
workLoop @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:19352
callCallback @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:149
invokeGuardedCallbackDev @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:199
invokeGuardedCallback @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:256
replayUnitOfWork @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:18578
renderRoot @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:19468
performWorkOnRoot @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20342
performWork @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20254
performSyncWork @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20228
requestWork @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20097
scheduleWork @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:19911
scheduleRootUpdate @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20572
updateContainerAtExpirationTime @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20600
updateContainer @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20657
ReactRoot.render @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20953
legacyRenderSubtreeIntoContainer @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21105
render @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21155
(anonymous) @ webpack-internal:///./.fable/Fable.Elmish.React.3.0.1/react.fs:29
webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:17117 The above error occurred in the <h6> component:
    in h6 (created by ForwardRef(Typography))
    in ForwardRef(Typography) (created by WithStyles(ForwardRef(Typography)))
    in WithStyles(ForwardRef(Typography))
    in div (created by ForwardRef(Toolbar))
    in ForwardRef(Toolbar) (created by WithStyles(ForwardRef(Toolbar)))
    in WithStyles(ForwardRef(Toolbar))
    in header (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ForwardRef(AppBar))
    in ForwardRef(AppBar) (created by WithStyles(ForwardRef(AppBar)))
    in WithStyles(ForwardRef(AppBar))
    in div
    in Unknown (created by WithStyles(Component))
    in WithStyles(Component)
    in Unknown (created by Elmish_HMR_Common_Components_LazyView)
    in div (created by Elmish_HMR_Common_Components_LazyView)
    in Elmish_HMR_Common_Components_LazyView

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
logCapturedError @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:17117
logError @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:17153
update.callback @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:18065
callCallback @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:16433
commitUpdateEffects @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:16472
commitUpdateQueue @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:16463
commitLifeCycles @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:17383
commitAllLifeCycles @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:18736
callCallback @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:149
invokeGuardedCallbackDev @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:199
invokeGuardedCallback @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:256
commitRoot @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:18948
(anonymous) @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20418
unstable_runWithPriority @ webpack-internal:///./node_modules/scheduler/cjs/scheduler.development.js:255
completeRoot @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20417
performWorkOnRoot @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20346
performWork @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20254
performSyncWork @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20228
requestWork @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20097
scheduleWork @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:19911
scheduleRootUpdate @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20572
updateContainerAtExpirationTime @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20600
updateContainer @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20657
ReactRoot.render @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20953
legacyRenderSubtreeIntoContainer @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21105
render @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21155
(anonymous) @ webpack-internal:///./.fable/Fable.Elmish.React.3.0.1/react.fs:29
webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:55 Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {0, 1, 2, 3}). If you meant to render a collection of children, use an array instead.
    in h6 (created by ForwardRef(Typography))
    in ForwardRef(Typography) (created by WithStyles(ForwardRef(Typography)))
    in WithStyles(ForwardRef(Typography))
    in div (created by ForwardRef(Toolbar))
    in ForwardRef(Toolbar) (created by WithStyles(ForwardRef(Toolbar)))
    in WithStyles(ForwardRef(Toolbar))
    in header (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ForwardRef(AppBar))
    in ForwardRef(AppBar) (created by WithStyles(ForwardRef(AppBar)))
    in WithStyles(ForwardRef(AppBar))
    in div
    in Unknown (created by WithStyles(Component))
    in WithStyles(Component)
    in Unknown (created by Elmish_HMR_Common_Components_LazyView)
    in div (created by Elmish_HMR_Common_Components_LazyView)
    in Elmish_HMR_Common_Components_LazyView
    at invariant (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:55:15)
    at throwOnInvalidObjectType (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:11833:5)
    at reconcileChildFibers (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:12607:7)
    at reconcileChildren (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:14402:28)
    at updateHostComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:14863:3)
    at beginWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:15649:14)
    at performUnitOfWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:19312:12)
    at workLoop (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:19352:24)
    at renderRoot (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:19435:7)
    at performWorkOnRoot (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20342:7)
@Neftedollar
Copy link
Author

I've checked FunctionComponent.Of works with simple ReactElements.

@Neftedollar
Copy link
Author

@mvsmal hey!
Can you help me with digging it?
How do you think where I should start?

@mvsmal
Copy link
Owner

mvsmal commented Jun 29, 2019

Hi. Sorry for the delay. Did you check Simple AppBar example?
https://mvsmal.github.io/fable-material-ui/#/demos/app-bar

The problem with withStyles is that it is a HOC and must be instantiated only once:

let appBarWithStyles = withStyles<IClassesProps> (StyleType.Styles styles) [] appBar

let view () =
    ReactElementType.create appBarWithStyles createEmpty []

Another issue might be due to partial application. Your appBar function should have only one argument props, which could be any type you want, implementing IClassesProps.
Unfortunately with the specifics of HOC, it is not suitable for curried functions.
The latest version of MaterialUI utilized the hooks API and fable-materia-ui is not yet supporting MaterialUI v4.x. I am working on it, however the last few months I had no time, unfortunately.

@Neftedollar
Copy link
Author

Neftedollar commented Jul 2, 2019 •
edited
Loading

@mvsmal Thank you!
But what is HOC? =)

@mvsmal
Copy link
Owner

mvsmal commented Jul 2, 2019

Higher-Order component:
https://reactjs.org/docs/higher-order-components.html

@Neftedollar
Copy link
Author

@mvsmal thank you!
it's very helpful

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Neftedollar @mvsmal