Clojurians Log v2

I ran into a wierd situation where I was using one Node libray that was working well with shadow-cljs (https://github.com/react-syntax-highlighter/react-syntax-highlighter), and then added another library that works well with shadow-cljs (https://github.com/otakustay/react-diff-view – has no dependencies), and this caused shadow-cljs to be unable to import the former library. Oddly enough, removing the latter dependency (via yarn remove) does not seem to help. I've also tried restarting shadow-cljs and removing all build files. The import that fails is [react-syntax-highlighter :refer [Prism]], the error is, the line that fails in the generated code is Object.defineProperty(exports,"Prism",{enumerable:!0,get:function(){return _prism.default}}), and the error (that happens in the browser – everything compiles without error) is:

TypeError: Cannot read property 'default' of undefined
    at Object.get [as Prism] (<url-for-cljs-runtime-dir>/module$node_modules$react_syntax_highlighter$dist$cjs$index.js:2:442)

...actually, one strange thing that I just found is that cljs-runtime/module$node_modules$react_syntax_highlighter$dist$cjs$prism.js.map contains var _prism = _interopRequireDefault(require(\"./styles/prism/prism\")); , but there's no corresponding var _prism line in cljs-runtime/module$node_modules$react_syntax_highlighter$dist$cjs$prism.js

FWIW here's prism.js:

shadow$provide.module$node_modules$react_syntax_highlighter$dist$cjs$prism=function(global,require,module,exports){var _interopRequireDefault=require("module$node_modules$$babel$runtime$helpers$interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:!0});exports.default=void 0;global=_interopRequireDefault(require("module$node_modules$react_syntax_highlighter$dist$cjs$highlight"));module=_interopRequireDefault(require("module$node_modules$react_syntax_highlighter$dist$cjs$styles$prism$prism"));
var _refractor=_interopRequireDefault(require("module$node_modules$refractor$index"));require=_interopRequireDefault(require("module$node_modules$react_syntax_highlighter$dist$cjs$languages$prism$supported_languages"));global=(0,global.default)(_refractor.default,module.default);global.supportedLanguages=require.default;exports.default=global}

and here's prism.js.map:

{
"version":3,
"file":"module$node_modules$react_syntax_highlighter$dist$cjs$prism.js",
"lineCount":2,
"mappings":"AAAAA,cAAA,CAAe,2DAAf,CAAgF,QAAQ,CAACC,MAAD,CAAQC,OAAR,CAAgBC,MAAhB,CAAuBC,OAAvB,CAAgC,CAGxH,IAAIC,uBAAyBH,OAAA,CAAQ,kEAAR,CAE7BI,OAAA,CAAOC,cAAP,CAAsBH,OAAtB,CAA+B,YAA/B,CAA6C,CAC3CI,MAAO,CAAA,CADoC,CAA7C,CAGAJ,QAAA,CAAQK,OAAR,CAAkB,IAAK,EAEnBC,OAAAA,CAAaL,sBAAA,CAAuBH,OAAA,CAAQ,iEAAR,CAAvB,CAEbS,OAAAA,CAASN,sBAAA,CAAuBH,OAAA,CAAQ,0EAAR,CAAvB,CAEb;IAAIU,WAAaP,sBAAA,CAAuBH,OAAA,CAAQ,qCAAR,CAAvB,CAEbW,QAAAA,CAAsBR,sBAAA,CAAuBH,OAAA,CAAQ,2FAAR,CAAvB,CAEtBY,OAAAA,CAAc,CAAC,CAAA,CAAGJ,MAAH,CAAcD,OAAf,EAAwBG,UAAxB,CAAmCH,OAAnC,CAA4CE,MAA5C,CAAmDF,OAAnD,CAClBK,OAAA,CAAYC,kBAAZ,CAAiCF,OAAjC,CAAqDJ,OAErDL,QAAA,CAAQK,OAAR,CADeK,MApByG;",
"sources":["node_modules/react-syntax-highlighter/dist/cjs/prism.js"],
"sourcesContent":["shadow$provide[\"module$node_modules$react_syntax_highlighter$dist$cjs$prism\"] = function(global,require,module,exports) {\n\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/interopRequireDefault\");\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n\nvar _highlight = _interopRequireDefault(require(\"./highlight\"));\n\nvar _prism = _interopRequireDefault(require(\"./styles/prism/prism\"));\n\nvar _refractor = _interopRequireDefault(require(\"refractor\"));\n\nvar _supportedLanguages = _interopRequireDefault(require(\"./languages/prism/supported-languages\"));\n\nvar highlighter = (0, _highlight.default)(_refractor.default, _prism.default);\nhighlighter.supportedLanguages = _supportedLanguages.default;\nvar _default = highlighter;\nexports.default = _default;\n};"],
"names":["shadow$provide","global","require","module","exports","_interopRequireDefault","Object","defineProperty","value","default","_highlight","_prism","_refractor","_supportedLanguages","highlighter","supportedLanguages"]
}

...it looks to me like shadow-cljs is leaving out a few lines of prism.js. Could this be a bug, or is there something I should be doing to make sure that these lines get included?

just saw that there's another error that happens prior to this:

TypeError: $jscomp.inherits is not a function

I followed the instructions at https://stackoverflow.com/questions/64169633/clojurescript-typeerror-jscomp-inherits-is-not-a-function, and now it works!

Thanks thheller for making a great tool btw :)

Hi @thheller In my case could ESM dynamic-import be useful? https://github.com/thheller/shadow-cljs/blob/3e559b8f9ea80cc1ad1c51772fe4aa8c099a1159/src/main/shadow/esm.cljs#L15

I am trying.

I'm trying to manage building functions for firebase alongside my clientside app. I'm currently using 2 builds to achieve this with the functions being built into the expected functions/index.js file. Unfortunately this requires duplicating my dependencies since firebase expects a functions/package.json file listing all deps and I also have to include those deps in the root package.json for shadow. Is there any way around this duplication. I don't see any support in shadow for specifying a different package.json for a particular build. Maybe there is another solution I'm missing?

@rollins.joseph in your functions build you can configure :js-options {:js-packages-dirs ["functions/node_nodules"]} then it'll take the packages installed there instead of the default <project>/node_modules

@admin055 I still don't know enough about inertia. I repeat that you should follow the code-splitting guide I posted yesterday. That will give you everything you need I think. It would be the same for esm basically, the dynamic import doesn't do anything magic for you.

@thheller thanks, i'll give that a try

when stuff works one way but then breaks when you add another package that is almost always caused by a version conflict on a common dependency

lib A requiring v1 and lib B requiring v2 of some dependency and that often causes trouble