Fork me on GitHub
#shadow-cljs
<
2023-08-01
>
simongray09:08:42

Currently trying to use https://github.com/vasturiano/react-force-graph. It seemingly gets compiled correctly into main.js, but in the web browser I run into this after requiring it in my CLJS file. I’m guessing this has something to do with there suddenly being multiple identical modules…? I wonder if there is any way to make this work at all…? Can’t find any similar import issues in the user guide.

thheller09:08:00

they are likely not identical modules

thheller09:08:23

do you include three.js via some cdn script tag or so?

thheller09:08:28

the error you get is from three.js, so you'll need to investigate where you are getting multiple three.js versions from

simongray09:08:43

I didn’t include three.js myself, but I guess it probably comes in as a transitive dependency in several places. This the package-json:

{
  "dependencies": {
    "create-react-class": "^15.7.0",
    "katex": "0.12.0",
    "markdown-it": "12.3.2",
    "markdown-it-block-image": "0.0.3",
    "markdown-it-footnote": "3.0.3",
    "markdown-it-texmath": "0.9.7",
    "markdown-it-toc-done-right": "4.2.0",
    "punycode": "2.1.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-force-graph": "^1.43.0"
  }
}

thheller09:08:15

you can also check npm list and look for duplicates of three

simongray09:08:31

npm list just gives the items in the package.json

simongray09:08:54

and the report doesn’t contain duplicates, or at least I am unable to see ascertain their existence :man-shrugging:

thheller09:08:00

could also be any other package bundling their own version of three.js

thheller09:08:09

look for larger than normal packages

simongray09:08:12

that seems likely

simongray12:08:30

Aframe seems abnormally large, but I’m not really sure what to do with that knowledge.

thheller13:08:32

so :js-options {:resolve {"three" {:target :global :global "THREE"}}}

thheller13:08:09

that will make shadow-cljs not include the three npm package at all and instead use the global variable THREE

thheller13:08:29

if a package already bundles three and provides this that might work?

thheller13:08:47

no clue if a-frame already bundles it but could be a try

thheller13:08:22

yes, it indeed seems to do that

simongray13:08:41

thank you! Gonna try that out!

simongray08:08:51

So that successfully removes the warning about the duplicate three.js, but the module load error is still present (and it actually crashes Firefox completely for me, had to force-quit). Do you have any idea how to debug something like that…?

simongray08:08:12

I mean this error. I can’t even view the compiled JS, since Firefox crashes when I attempt to do so… not that I think it would help much.

thheller09:08:38

that is not enough info. as the text says any additional errors are whats relevant. not the yellow warnings

simongray11:08:22

I now also updated a bunch of different dependencies and now the problem is suddenly not present… 🤷

simongray11:08:34

So I guess that’s good at least!

simongray11:08:53

Thanks for answering my clueless questions