Fork me on GitHub
#cljsrn
<
2021-09-08
>
soxley00:09:03

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.

soxley00:09:30

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]))

soxley00:09:10

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

soxley00:09:35

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

dnolen12:09:21

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

dnolen12:09:40

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

dnolen12:09:01

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

dnolen12:09:03

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

soxley13:09:32

Yeah, so the tutorial I’m following here: https://storybook.js.org/tutorials/intro-to-storybook/react-native/en/get-started/ 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.

dnolen14:09:26

@soxley https://clojurescript.org/guides/webpack this may look like it's specific to webpack but it is not

dnolen14:09:53

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

dnolen14:09:24

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

soxley18:09:53

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