Layout component unable to render when Reitit router introduced

202 views Asked by At

I'm having trouble sorting out why a layout/parent component (app.components.layout) is not resolving after a hard reload BUT is okay after a hot reload with dev server after I introduced routes.

The error: TypeError: dapp.components.layout.render is not a function

This error doesn't appear when I render the view component in the @match atom directly.

  (ns app.views
    (:require
     [reagent.core :as r]
     [reitit.frontend :as rf]
     [reitit.coercion.schema :as rsc]
     [dapp.components.layout :as layout]
     [dapp.components.dashboard :as dashboard]
     [dapp.components.settings :as settings])))

  (def routes
    (rf/router
      ["/"
        [""
          {:name ::dashboard
          :view dashboard/render
          :controllers [{:start (log-fn "start" "dashboad controller")
                         :stop (log-fn "stop" "dashboard controller")}]}]
        ["settings"
          {:name ::settings
          :view settings/render}]]
      {:data {:controllers [{:start (log-fn "start" "root-controller")
                             :stop (log-fn "stop" "root controller")}]
              :coercion rsc/coercion}}))

  ;; broken on a hard browser refresh but works when shadow does a hot reload.
  (defn main-panel []
      [:div
      (if @match
         (let [view (:view (:data @match))]
           (layout/render view @match)))]) ;; TypeError: app.components.layout.render is not a function
 
  ;; working
  (defn main-panel []
      [:div
      (if @match
         (let [view (:view (:data @match))]
           (view nil))])

Layout Component:

  (ns app.components.layout)

  (defn render [view match]
    [:div
       [view]])

View Component:

  (ns app.components.dashboard)

  (defn render [props]
    [:div
       "Dashboard"])

Setup:

  (ns app.core
    (:require
     [reagent.dom :as rdom]
     [re-frame.core :as re-frame]
     [reitit.frontend.easy :as rfe]
     [reitit.frontend.controllers :as rfc]
     [dapp.events :as events]
     [dapp.views :as views]
     [dapp.config :as config]
     ))

  (defn dev-setup []
    (when config/debug?
      (println "dev mode")))

  (defn ^:dev/after-load mount-root []
    (re-frame/clear-subscription-cache!)
    (let [root-el (.getElementById js/document "app")]
      (rdom/unmount-component-at-node root-el)
      (rdom/render [views/main-panel] root-el)))

  (defn init []
    (re-frame/dispatch-sync [::events/initialize-db])
    (dev-setup)
    ;; router setup
    (rfe/start!
      views/routes
      (fn [new-match]
        (swap! views/match (fn [old-match]
                      (if new-match
                         (assoc new-match :controllers (rfc/apply-controllers (:controllers old-match) new-match))))))
      {:use-fragment true})
    (mount-root))
0

There are 0 answers