Fork me on GitHub
#cljsrn
<
2017-09-13
>
petterik00:09:36

I've got problems with the react-native bundle process timing out, as it seem to do when a clojurescript project gets large enough. I'm using advanced compilation and I'm trying to use expo (thanks @seantempesta for the template!) I tried @pesterhazy's re-natal-husk approach and I got that to output a bundle(yay), but now I couldn't figure out how to use the re-natal-husk approach with exp publish? If I understand the exp/expo code correctly, it calls the bundler for me so I can't do the husk dance. Next up, I attempted Austin Birch approach (http://austinbirch.co.uk/clojurescript-react-native-bundling-release.html). It's now a bit outdated, so I updated the patch to the metro-bundler (https://gist.github.com/petterik/8ac28e0bd742a954ae9f27c3f5054c7a) but I couldn't get the transformer to work without the bundler exiting with a non-descriptive error message: "map is not defined". My plan was to configure the bundle call to use this custom transformer and the patched metro-bundler, so that it'd work with exp publish. Wasn't able to see this plan through. Does anyone have any advice on avoiding the metro-bundler from timing out?

danielneal07:09:05

I haven't managed to get any of the tricks to work, the only thing that's worked for me to get the damn thing to build at all is finding the timeout interval that's hardcoded in the metro bundler and making it bigger

danielneal07:09:39

I wish there was another way 😬

mv08:09:17

Anyone else seeing this error with re-natal? Error: Cannot find module '@cljs-oss/module-deps

vikeri08:09:39

Trying to use npm-deps?

mv08:09:56

No, I’m just trying to get the initial app to run

mv08:09:20

➜  slide lein figwheel ios
Figwheel: Cutting some fruit, just a sec ...
Figwheel: Validating the configuration found in project.clj
Figwheel: Configuration Valid :)
Figwheel: Starting server at 
Figwheel: Watching build - ios
Compiling "target/ios/not-used.js" from ["src" "env/dev"]...
module.js:491
    throw err;
    ^

Error: Cannot find module '@cljs-oss/module-deps'
    at Function.Module._resolveFilename (module.js:489:15)
    at Function.Module._load (module.js:439:25)
    at Module.require (module.js:517:17)
    at require (internal/module.js:11:18)
    at [eval]:3:13
    at ContextifyScript.Script.runInThisContext (vm.js:44:33)
    at Object.runInThisContext (vm.js:116:38)
    at Object.<anonymous> ([eval]-wrapper:6:22)
    at Module._compile (module.js:573:30)
    at evalScript (bootstrap_node.js:452:27)

Successfully compiled "target/ios/not-used.js" in 23.99 seconds.
Launching ClojureScript REPL for build: ios
Figwheel Controls:
          (stop-autobuild)                ;; stops Figwheel autobuilder
          (start-autobuild [id ...])      ;; starts autobuilder focused on optional ids
          (switch-to-build id ...)        ;; switches autobuilder to different build
          (reset-autobuild)               ;; stops, cleans, and starts autobuilder
          (reload-config)                 ;; reloads build config and resets autobuild
          (build-once [id ...])           ;; builds source one time
          (clean-builds [id ..])          ;; deletes compiled cljs target files
          (print-config [id ...])         ;; prints out build configurations
          (fig-status)                    ;; displays current state of system
          (figwheel.client/set-autoload false)    ;; will turn autoloading off
          (figwheel.client/set-repl-pprint false) ;; will turn pretty printing off
  Switch REPL build focus:
          :cljs/quit                      ;; allows you to switch REPL to another build
    Docs: (doc function-name-here)
    Exit: Control+C or :cljs/quit
 Results: Stored in vars *1, *2, *3, *e holds last exception object
Prompt will show when Figwheel connects to your application

vikeri08:09:03

Ok, yeah the compiler probably found your node_modules folder and tried to include those deps.

mv08:09:30

What should I do?

vikeri08:09:48

Try with an older version of cljs

vikeri08:09:11

Or a newer one if this is a bug

mv08:09:23

This is the latest one

vikeri08:09:08

Well you can try to add @cljs-oss/module-deps it to your package.json with yarn or npm

vikeri08:09:14

yarn add or npm i

vikeri08:09:54

Or try asking in the #cljs channel, @U061V0GG2 or @U0CK4CKAP will be able to help you probably

mv08:09:18

Cool thanks

seantempesta09:09:38

hey @petterik. Glad you’re liking the expo template. I haven’t used @pesterhazy’s template yet (but it looks very interesting), so I can’t comment directly. Have you tried asking in the Expo slack? I’ve been getting along fine with the simple timeout hack (edit node_modules/metro-bundler/src/JSTransformer/index.js and extend the timeout by adding a couple of zeros)

// Worker will timeout if one of the callers timeout.
const TRANSFORM_TIMEOUT_INTERVAL = 301000;

danielneal09:09:49

mm yeah I do the same

danielneal09:09:10

would be awesome if there was a way of skipping the transform and minify steps

danielneal09:09:18

cos google closure does that already

danielneal09:09:24

but I can't figure out how

vikeri09:09:31

Yeah, especially now that npm deps is becoming a thing

vikeri09:09:37

in cljs that is

vikeri09:09:18

The ideal thing would be to replace the babel step of the packager but let it do the rest of its magic

seantempesta09:09:45

Is that possible via the babel configuration file? Babel seems like it’s got a million levers. Certainly one of them would let you tell it to skip the transform/minification process for the clojurescript file. I’m totally fine with putting my react requires in a separate file.

vikeri09:09:40

I’ve tried to do it but failed. I was only successful when I compiled everything into a blob and overwrote index.android.js with that file. The problem then is that npm-deps has to be processed by the Closure compiler rather than the RN packager

vikeri09:09:28

But that is theoretically possible. There is even a hook in the cljs compiler where we could compile external deps with babel (since Google Closure won’t handle JSX for example).

vikeri09:09:56

Ideally those external deps would be cached

manu09:09:28

Hi! I'm having a problem with react-navigation. I have this structure

StackNav
- Home
-Tab 
   --Tab A (First screen)
   --Tab B 
I would like from Home go to Tab B. Now I can go only to Tab A . How I can make it work? Thx 🙂

wojciech09:09:32

You nest a TabNnavigator in the StackNavigator, right?

wojciech09:09:23

I'd assume the way to do is to pass a parameter along with a route which tab should be the start one and pass it down to tabnavigator

wojciech09:09:05

Or check this parameter inside the component that you render in the componentWillMount and set the proper tab as starting one

manu09:09:36

ah ok so I can just change the initial-route of the tab navigator?

wojciech09:09:51

> initialRouteName - The routeName for the initial tab route when first loading

manu09:09:06

great I didn't think about this solution 🙂

wojciech10:09:11

Good luck 😉 🤞

manu10:09:56

thanks 😄

petterik13:09:42

@danieleneal, @seantempesta holy shit, it worked! Finished building JavaScript bundle in 1416705ms. I tried it yesterday and gave up 🙃 I'll still ask in the expo slack to see if there's anything they're willing to do for us clojurescript folks

danielneal13:09:57

hahaha yeah I couldn't believe it the first time

danielneal13:09:01

it takes an aaaaaage

danielneal13:09:31

the expo slack is a bit question heavy and no answers I've found

danielneal13:09:39

but you could put a forum post up

petterik13:09:25

@danieleneal which forum do you have in mind? Is there an expo forum?

petterik13:09:53

I've been stuck on this (on and off) for 2 months

petterik13:09:27

Never been so happy looking at a green text 😆

petterik13:09:26

Is there a way to skip bundling the android bundle for exp publish?

petterik13:09:03

In case someone is curious how long it can take for the bundling process to finish: My main.js is 1,518,693 bytes compiled with :advanced optimizations. 23 minutes to build my iOS bundle 17 minutes to build my android bundle

vikeri13:09:50

That’s not awesome

vikeri13:09:22

What kind of a performance improvement do you get from advanced?

petterik13:09:48

I haven't built the UI yet so I don't know. Brought in all the logic from our web app to see if we can build a mobile app from it

petterik13:09:31

@vikeri What are you using for "production build" if not advanced optimizations, and how long does it take for you to bundle your apps?

vikeri13:09:20

@petterik It’s a bit of a frankenstein, we’re using the base of boot-react-native but customized to exclude things like repl and live-reload… But basically it’s just all the files compiled normally with cljs and then fed to the RN packager. It takes us 7 minutes to build all cljs and then the app from a clean slate.

vikeri13:09:42

I’d love to do advanced but can’t really prioritize it atm

seantempesta13:09:48

@petterik glad the worked. It also takes me 15-20 mins per build. Ugh. We definitely need a better solution so please let me know if you hear back from the Expo team on a workaround.

petterik15:09:14

I've got an expo forum post ready, but a new user I can only post 2 links and it has 6. Waiting until the new user status goes away.

pesterhazy21:09:12

So ridiculous, it's not like the packager is doing anything in those 20 minutes