Fork me on GitHub

I’m trying to get storybook working with a react-native app that I have set up with Krell. I have storybook up and running and I have the app up and running, but I think what I need to do next is add StorybookUIRoot into my app, but I’m not sure how to do that. My main problem is I don’t know how to import a JavaScript module from my Clojurescript code. I’m trying js/require but it doesn’t seem to work the way I expect.


There’s a storybook directory in the root of my project, and this is the code for my app:

(ns react-native-client.core
  (:require [reagent.core :as r]
            [reagent.react-native :as rn]))

(def StorybookUIRoot (js/require "../../storybook"))

(defn hello []
  [rn/view {:style {:flex 1 :align-items "center" :justify-content "center"}}
   [rn/text {:style {:font-size 30}} "Hello Lift Buddy!"]])

(defn ^:export -main [& args]
  (r/as-element [StorybookUIRoot]))


That yields an error Error: Assert failed: Invalid Hiccup form: [nil]


Which I assume means that StorybookUIRoot is nil and my js/require isn’t working.


@soxley you don't need to use js/require


Krell is designed to just leverage Metro and node_modules through ClojureScript support for bundlers


Whatever the docs are for StorybookUIRoot you should be able to replicate it in ClojureScript


that said there may be peculiarities about Storybook here that I don't understand - I've never actually tried to do this myself


Yeah, so the tutorial I’m following here: says to import StorybookUIRoot from ‘../storybook’ (excuse the quotes, I’m on my phone), so that’s what I’m trying to replicate. I thought js/require would be the way to do that. I’ve looked for other docs about how to do that generally in ClojureScript but I haven’t had much luck.


@soxley this may look like it's specific to webpack but it is not


it's worth going over and shows how to import something from node_modules


Krell just reuses the bundler stuff so it's not any different


Ok, that looks promising. I’ll take a look