2024-01-17 reagent | Clojure Slack Archive

reagent

liebs 2024-01-17T14:01:55.303739Z

I'm trying to do https://www.framer.com/motion/component/#custom-components using a reagent-mui button. I think this is possible, because the requirement for the motion function is its argument be a forwardRef. The underlying MUI button is one. So I've written

(def motion-button (motion (r/as-element button))

and render it with :>. But I get this error that I'm not sure I've ever seen tbh:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `ForwardRef`.

p-himik 2024-01-17T14:03:41.404839Z

r/as-element accepts Hiccup vectors.

liebs 2024-01-17T14:04:36.435499Z

Good point but that still returns the same error

p-himik 2024-01-17T14:13:21.249239Z

Just in case - be sure to fully reload the page instead of relying on hot reload in such cases. Is there any stacktrace? Does it point at anything useful? If not, you can use your browser's ability to automatically break on thrown exceptions and see where it gets thrown and what that got: object really is.

liebs 2024-01-17T14:19:40.861109Z

Nothing that I can understand

createFiberFromTypeAndProps
        createFiberFromElement
        createChild
        reconcileChildrenArray
        reconcileChildFibers
        reconcileChildren
        beginWork
        beginWork$1
        performUnitOfWork
        workLoopSync
        renderRootSync
        recoverFromConcurrentError
        performConcurrentWorkOnRoot
    flushWork scheduler.development.js:22
    performWorkUntilDeadline scheduler.development.js:456
    scheduler_development scheduler.development.js:332
    module$node_modules$scheduler$cjs$scheduler_development module$node_modules$scheduler$cjs$scheduler_development.js:18
    jsRequire js.js:81
    module$node_modules$scheduler$index module$node_modules$scheduler$index.js:4
    jsRequire js.js:81
    react_dom_development React
    module$node_modules$react_dom$cjs$react_dom_development module$node_modules$react_dom$cjs$react_dom_development.js:917
    jsRequire js.js:81
    module$node_modules$react_dom$index module$node_modules$react_dom$index.js:4
    jsRequire js.js:81
    module$node_modules$react_dom$client module$node_modules$react_dom$client.js:4
    jsRequire js.js:81
    require js.js:136
    <anonymous> reagent.dom.client.js:15
react-dom.development.js:28584:2

I checked the render method of the forward ref as the error suggests, though, and this seems weird to me: the corresponding function is named require? That sounds to me like the propTypes thing that is available for typechecking React props in JS?

p-himik 2024-01-17T14:21:40.042539Z

No clue, I'd definitely try to debug and see what that aforementioned object is.

liebs 2024-01-17T14:34:06.779409Z

So the output of

(js/console.log (r/adapt-react-class (motion (r/as-element [button]))))

does reveal that there's somehow an extra object wrapping what looks to me like a pretty standard React object: The second object is just the value of the .-tag field.

liebs 2024-01-17T14:34:57.237079Z

Unfortunately, accessing .-tag and trying to render with that value throws the same error.

p-himik 2024-01-17T14:36:13.810619Z

adapt-react-class produces components suitable for Reagent. It doesn't matter what it has - it's Reagent implementation details.

👍🏻 1

liebs 2024-01-17T14:45:16.376279Z

Decided to go the other direction and wrap the motion components in MUI one. Works that way, fortunately. Thanks for your help.

👍 1

juhoteperi 2024-01-17T20:33:19.930299Z

motion takes a component, not element. use reactify-component: (motion (r/reactify-component button)) or in certain cases you could use a regular fn as component (React component, not Reagent component), which just returns elements using Reagent: (motion (fn [^js props] (r/as-element [:div ...])))

🙏🏻 1

Clojurians Log v2

reagent