Fork me on GitHub
#shadow-cljs
<
2022-12-15
>
Mikko Harju11:12:49

Hi all! Has someone come across resolving errors re: goog packages in React Native lately? I'm currently upgrading an application to 0.70.6 and was hit with an error metro trying to resolve ./app/goog.math.long.js – I got around this by patching metro's resolver and made it ./out/goog.math.long.js – but it seems that something is wrong still since it still complains about

ReferenceError: Property 'Long' doesn't exist, js engine: hermes
. I'm figuring this out myself but wanted to ask if someone has already been seeing this 🙂

Mikko Harju11:12:50

It seems that it is not loading the goog.math.long.js currently. That's probably causing the error.

Mikko Harju11:12:11

OK. Something is expecting the output to be in directory "app" – but it is written to "out".

Mikko Harju12:12:17

=> using output-dir "app" gives a new error 🙂

Mikko Harju12:12:53

Now it's concatenating an absolute path with a URL. Maybe this is configuration related.

Mikko Harju12:12:00

That error has to do with symbolication. The actual error is still

ERROR  ReferenceError: Property 'Long' doesn't exist, js engine: hermes

Mikko Harju12:12:17

OK. It's the Long.fromBits in goog.math.long.js that is causing the issue. Maybe Hermes does not have that.

thheller12:12:53

as far as I remember this is due to hermes not suporting es6 features like const

thheller12:12:03

that file just hpappens to be the first file trying to use them

thheller12:12:23

set :compiler-options {:output-feature-set :es5} in your build config

Mikko Harju12:12:28

OK - thanks! any ideas on the output dir? We had out previously and it has worked earlier but now it does not.

thheller12:12:01

whats in your build config?

thheller12:12:27

:output-dir

Mikko Harju12:12:35

Previously I had :output-dir "out" – now I have :output-dir "app"

Mikko Harju12:12:53

If I have output-dir "out" I get an error when it tries to resolve goog.math.long.js

thheller12:12:53

and did you update the .js file including them?

Mikko Harju12:12:09

Yeah, using "app" metro works

Mikko Harju12:12:24

(I updated refs to out => app from relevant places)

Mikko Harju12:12:54

I don't mind having the output in app so it's not a big deal, just threw me off since this had worked before.

thheller12:12:16

shadow-cljs doesn't care where you put it

thheller12:12:30

it just writes to whatever :output-dir you tell it

thheller12:12:44

about special meanings in react-native I have no clue, so can't comment on that

Mikko Harju12:12:27

Yes, the output gets written to out as before, but for some reason metro gets "app" from out of nowhere and tries to resolve from it

Mikko Harju12:12:06

=> switching shadow-cljs to output to "app" makes it all work again

Mikko Harju12:12:36

@U05224H0W switching to es5 did not work – it still fails on

ERROR  ReferenceError: Property 'Long' doesn't exist, js engine: hermes

thheller12:12:36

shadow-cljs doesn't write any output to out if you don't configure it

Mikko Harju12:12:44

Yes, i know 🙂

thheller12:12:46

if there are files getting created there it is not shadow-cljs

Mikko Harju12:12:03

No, there was nothing like that happening

thheller12:12:20

then I don't know. never used react-native or hermes

Mikko Harju12:12:48

Yes, it seems that Hermes is missing something essential that goog.math.long expects to have

Mikko Harju12:12:05

I can just opt out from Hermes for the time being, that is not a problem

Mikko Harju12:12:21

So, the only question remains to be solved is that why does react native expect to have stuff written in "app" when we have been using "out" for many years without issues. This is not a shadow-cljs issue probably and I can live with just changing the output dir 😄

Mikko Harju12:12:58

Thanks for your work on shadow-cljs. It's such a great tool 🙂

Omar12:12:03

maybe something is cached for you?

Mikko Harju15:12:11

I did reset caches et al, and switching back made it work again. I can live without Hermes for the time being. Thanks for the info though!

Hukka13:12:54

Hm. Seems like requiring ["@mui/material/Box" :default Box] works as expected, but ["@mui/material/Box$default" :as Box] doesn't as any use of Box later will refer to https://cljs.github.io/api/cljs.core/Box

Hukka13:12:23

No idea if this is happening in shadow or cljs compiler

thheller13:12:37

someone mentioned this a few days ago but didn't open an issue I think

thheller13:12:12

this is indeed a bug yeah

Hukka13:12:38

I can. Should it go to shadow-cljs issue tracker? And is that enough of a description, or should I make a minimal repo that shows the problem with package.json and everything?

Hukka13:12:18

Also noticed than in working cases too the resulting JS code is a bit different. The old style creating shadow.js.require() calls and then referring to objects with names like modules$node_modules$$DefaultExport$index.default, while the new one will skip the require and refer to shadow.js.shim.module$$DefaultExport$default. I tried looking at the issues around the time this changed in the docs (Feb 20), but didn't find anything, so I wonder what the implications are. At first I thought that both styles would result in identical code, so I guess the translation is happening at a different place?

thheller13:12:49

should be easy to reproduce. I think I already know the problem so just an issue as a reminder is enough

Hukka13:12:58

Got it, filing