search

mvsmal / fable-material-ui

Fable bindings for Material-UI https://mvsmal.github.io/fable-material-ui/
MIT License
61 stars 8 forks source link

FunctionComponent.Of syntax is not working #65

Open Neftedollar opened 5 years ago

Neftedollar commented 5 years ago

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 commented 5 years ago

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

Neftedollar commented 5 years ago

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

mvsmal commented 5 years ago

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 commented 5 years ago

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

mvsmal commented 5 years ago

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

Neftedollar commented 5 years ago

@mvsmal thank you! it's very helpful