Fork me on GitHub
#re-frame
<
2018-10-24
>
Travis17:10:29

Hey guys, I am very new to clojurescript/reframe and SPAs in general. I am just playing around with learning how to do a basic app with reframe and figwheel. I am also trying out material-lite for css. I have a very simple view that I am just hardcoding up right now to just get the basic rendering working and I am getting an error in chrome dev tools when the figwheel is trying to alter the page on code changes.

react-dom.inc.js:12877 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at removeChildFromContainer ()
    at unmountHostComponents ()
    at commitDeletion ()
    at commitAllHostEffects ()
    at HTMLUnknownElement.callCallback ()
    at Object.invokeGuardedCallbackDev ()
    at invokeGuardedCallback ()
    at commitRoot ()
    at completeRoot ()
    at performWorkOnRoot ()
    at performWork ()
    at performSyncWork ()
    at requestWork ()
    at scheduleWorkImpl ()
    at scheduleWork ()
    at scheduleRootUpdate ()
    at updateContainerAtExpirationTime ()
    at Object.updateContainer ()
    at ReactRoot.render ()
    at legacyRenderSubtreeIntoContainer ()
    at render ()
    at reagent$dom$render_comp ()
    at Function.cljs$core$IFn$_invoke$arity$3 ()
    at reagent$dom$render ()
does anyone know what I have done here, lol

Braden Shepherdson17:10:54

just a shot in the dark, but the material-lite components tend to have a bunch of wrapper elements; it's possible that one of your components is getting wrapped or moved around in the DOM, and then when Figwheel tries to remove the old one and replace it with the new one, it's trying to grab the inner element instead of the outer one.

Braden Shepherdson17:10:18

maybe eyeball the DOM structure in the dev tools and make sure it's what you expected.

Travis17:10:24

thanks, on a side note. Is there a potential better set of CSS that works well with reframe ?

Braden Shepherdson17:10:56

if you're looking for Material Design components, that's definitely the way to go. there might already be a reagent/re-frame wrapper for them? if not, that would be a great contribution.

Braden Shepherdson17:10:17

(full disclosure: I'm an engineer at Google and like Material Design)

Braden Shepherdson17:10:57

(more depressing full disclosure: these are coincidences, and I in no way use Clojure at work 😞 )

Travis18:10:10

lol, thanks

Braden Shepherdson18:10:54

Angular 2 and NgRx is like re-frame. but only in the way that white rice and water is like a delicious dinner.

Braden Shepherdson18:10:08

they'll both {ship your website, keep you from starving}.

frenata22:10:56

@camechis Haven't used material-lite before, but it looks like it's a package of both css and js that you need to include? If so, I'd tend to agree with @braden.shepherdson. Since you're new to the space, I'd suggest grabbing a plain css library (pure maybe?) and just focus on re-frame and hiccup for a while before worrying about interop with js libraries that may be doing dom manipulation

frenata22:10:46

there is https://clojars.org/cljsjs/material-ui , though I haven't used it

Travis22:10:35

@andrew354 Thanks, I will take a look at it

mikethompson23:10:13

The re-frame-template allows you to get going with re-com which might be good enough if you are experimenting (but it is NOT material UI based)

mikethompson23:10:21

lein new re-frame <project-name> +re-com +10x