three-stdlib/index.cjs.js - Illegal variable reference before declaration: i

[ertugrulcetin]

• three version: 0.129.0
• three-stdlib version: 2.1.0

Problem description:

When I try to get a production build with shadow-cljs (It uses Google Closure library), I get the following error:

Closure compilation failed with 2 errors
--- node_modules/three-stdlib/index.cjs.js:2
Illegal variable reference before declaration: i
--- node_modules/three-stdlib/index.cjs.js:2
Illegal variable reference before declaration: t

If I don't require @react-three/drei library in the namespace/class/my project everything seems fine, I assume some code in the library is broken/invalid, but Webpack is able to ignore it and process it.

Here is the discussion with the author of shadow-cljs:

[joshuaellis]

You forgot to fill out the relevant code part of the template. If you can recreate this bug in a small reproduction, we'll be able to look into it 👍🏼

[ertugrulcetin]

@joshuaellis Here is the repo https://github.com/ertugrulcetin/racing-game-cljs/tree/repro-three-stdlib-bug and I created a branch for the repro: repro-three-stdlib-bug, you can run the project through README. After npm run watch you'll see the error.

[bbss]

@ertugrulcetin

I also run into this bug using closure compiler and shadow-cljs. I figured out you can sidestep this issue by using the different module type in the shadow-cljs.edn config:

:builds {:main
          {:target     :browser
           ;;snipped details
           :js-options {#_#_:entry-keys ["module" "browser" "main"]
                        :resolve {"three-stdlib" {:target :file :file "node_modules/three-stdlib/index.js"}
                                  "@react-three/drei" {:target :file :file "node_modules/@react-three/drei/index.js"}
                                  "@react-three/fiber" {:target :file :file "node_modules/@react-three/fiber/dist/react-three-fiber.esm.js"}}}
           :compiler-options {:infer-externs :auto
                              :output-feature-set :es6}}
          }

Note that the closure compiler is probably complaining about a legitimate issue, so it would be great if this bug is fixed, but this should get you further for now.

[ertugrulcetin]

@bbss thank you so much! But I still have some problems, when I remove drei require from the namespace everything works otherwise I get the following error and the app crashes:

Here is my shadow-cljs config:

:target :browser
:js-options {:resolve {"three-stdlib" {:target :file :file "node_modules/three-stdlib/index.js"}
                       "@react-three/drei" {:target :file :file "node_modules/@react-three/drei/index.js"}
                       "@react-three/fiber" {:target :file :file "node_modules/@react-three/fiber/dist/react-three-fiber.esm.js"}
                       "@react-three/cannon" {:target :file :file "node_modules/@react-three/cannon/dist/index.js"}}}
:compiler-options {:infer-externs :auto
                   :output-feature-set :es6}

[joshuaellis]

This error looks like it's to do with three-mesh-bvh not three-stdlib?

[ertugrulcetin]

@bbss could you fork the project and try to make it work? Maybe I'm doing something wrong...

[ertugrulcetin]

@joshuaellis nope, it's three-stdlib. There is something wrong/invalid code inside node_modules/three-stdlib/index.cjs.js.

[ertugrulcetin]

@joshuaellis When I add this code (regeneratorRuntime) to drei library everything seems work now:

node_modules/@react-three/drei/index.js: import regeneratorRuntime from "regenerator-runtime";

Could you add this so every other JS platform can leverage these libraries?

[joshuaellis]

I haven't had the time to look into this issue yet, but I'm not sure if drei should be supplying regenerator-runtime as some people will be using this in their own projects already. You've previously said the issue is with three-stdlib not drei so i'm confused why you're suggesting we should resolve the issue in drei.

Also, i've just checked out the repo, it's very hard to understand whats going on there, I would suggest you just isolate the problem to a simple scene using three-stdlib.

[ertugrulcetin]

@joshuaellis Sorry, you're right. I had to be more clear, drei uses three-stdlib so I thought maybe this workaround might work. But I found a way, just adding regenerator-runtime as a dep and my project is able to work. I had to use modules so I don't get this Illegal variable reference before declaration error. I think we can close this issue, it seems that the libraries work with webpack projects without having a problem.

[suud]

I was able to resolve the issue by adding the following to my shadow-cljs.edn:

:js-options {:entry-keys ["module" "browser" "main"]}

But you should consider what the shadow-cljs documentation says about using the :entry-keys JS option:

Make sure to test thoroughly and compare the build report output to check size differences when switching this. Results may vary greatly in positive or negative ways.

Using :js-options {:resolve ...} as mentioned by @bbss (above) also works for me. I don't get any errors in the DevTools Console (Note: I tried it in my own project and not the mentioned example repo).

For both solutions, there was no need to pull in extra deps or change anything else.