Uncaught TypeError: $jscomp.inherits is not a function

Question

I'm getting this error while trying to build a Clojurescript project with shadow-cljs. The error is happening with the optimization level set to simple.

The full output in the browser console looks like this:

js.js:74 shadow-cljs - failed to load 34
shadow.js.jsRequire @ js.js:74
shadow$provide.<computed> @ index.js:5
shadow.js.jsRequire @ js.js:66
shadow$provide.<computed> @ index.js:8
shadow.js.jsRequire @ js.js:66
shadow$provide.<computed> @ index.js:6
shadow.js.jsRequire @ js.js:66
shadow.js.require @ js.js:113
(anonymous) @ index.js:2
(anonymous) @ append.js:2
js.js:74 shadow-cljs - failed to load 49
shadow.js.jsRequire @ js.js:74
shadow$provide.<computed> @ index.js:8
shadow.js.jsRequire @ js.js:66
shadow$provide.<computed> @ index.js:6
shadow.js.jsRequire @ js.js:66
shadow.js.require @ js.js:113
(anonymous) @ index.js:2
(anonymous) @ append.js:2
js.js:74 shadow-cljs - failed to load 124
shadow.js.jsRequire @ js.js:74
shadow$provide.<computed> @ index.js:6
shadow.js.jsRequire @ js.js:66
shadow.js.require @ js.js:113
(anonymous) @ index.js:2
(anonymous) @ append.js:2
js.js:74 shadow-cljs - failed to load 148
shadow.js.jsRequire @ js.js:74
shadow.js.require @ js.js:113
(anonymous) @ index.js:2
(anonymous) @ append.js:2
index.js:5 Uncaught TypeError: $jscomp.inherits is not a function
    at Object.shadow$provide.<computed> (index.js:5)
    at shadow.js.jsRequire (js.js:66)
    at Object.shadow$provide.<computed> (index.js:5)
    at shadow.js.jsRequire (js.js:66)
    at Object.shadow$provide.<computed> (index.js:8)
    at shadow.js.jsRequire (js.js:66)
    at Object.shadow$provide.<computed> (index.js:6)
    at Object.shadow.js.jsRequire (js.js:66)
    at Object.shadow.js.require (js.js:113)
    at index.js:2
shadow$provide.<computed> @ index.js:5
shadow.js.jsRequire @ js.js:66
shadow$provide.<computed> @ index.js:5
shadow.js.jsRequire @ js.js:66
shadow$provide.<computed> @ index.js:8
shadow.js.jsRequire @ js.js:66
shadow$provide.<computed> @ index.js:6
shadow.js.jsRequire @ js.js:66
shadow.js.require @ js.js:113
(anonymous) @ index.js:2
(anonymous) @ append.js:2
favicon.ico:1 GET http://localhost:8000/favicon.ico 404 (File not found)

I've created an example repo that replicates what I'm seeing as simply as I can here.

I've tried clearing caches and whatnot as described here.

With optimizations set to advanced I don't get this problem but I get other bugs more randomly with harder to read stack traces. Since it seems likely that it's the same problem appearing in different ways and since this is easier to replicate I'm attempting to making things work in simple mode first. The errors I get in the full app with advanced compilation look like this:

core.cljs:2564 Uncaught TypeError: pe is not a function
    at Ib (core.cljs:2564)
    at Function.wn.b (set.cljs:56)
    at Nn.g._update_watching (ratom.cljs:408)
    at yn (ratom.cljs:62)
    at Qn (ratom.cljs:539)
    at c.render (component.cljs:271)
    at kg (react-dom.production.min.js:188)
    at qi (react-dom.production.min.js:187)
    at ak (react-dom.production.min.js:270)
    at Ni (react-dom.production.min.js:251)
Ib @ core.cljs:2564
wn.b @ set.cljs:56
g._update_watching @ ratom.cljs:408
yn @ ratom.cljs:62
Qn @ ratom.cljs:539
(anonymous) @ component.cljs:271
kg @ react-dom.production.min.js:188
qi @ react-dom.production.min.js:187
ak @ react-dom.production.min.js:270
Ni @ react-dom.production.min.js:251
me @ react-dom.production.min.js:251
Ag @ react-dom.production.min.js:244
(anonymous) @ react-dom.production.min.js:124
e.unstable_runWithPriority @ scheduler.production.min.js:19
cd @ react-dom.production.min.js:123
Oh @ react-dom.production.min.js:124
uc @ react-dom.production.min.js:123
Vc @ react-dom.production.min.js:238
enqueueForceUpdate @ react-dom.production.min.js:135
r.forceUpdate @ react.production.min.js:13
g.flush_render @ batching.cljs:39
g.flush_queues @ batching.cljs:98
g.run_queues @ batching.cljs:78
a @ batching.cljs:59
requestAnimationFrame (async)
g.schedule @ batching.cljs:59
mn @ batching.cljs:52
g.queue_render @ batching.cljs:64
pn @ batching.cljs:112
Qn.d.ob.d.Ja @ ratom.cljs:544
g._handle_change @ ratom.cljs:402
Hc @ ratom.cljs:345
Cn @ ratom.cljs:104
g.ua @ ratom.cljs:146
Qc @ core.cljs:864
qf @ core.cljs:4493
(anonymous) @ lobby.cljs:53
fa @ react-dom.production.min.js:53
ma @ react-dom.production.min.js:53
wa @ react-dom.production.min.js:54
nh @ react-dom.production.min.js:101
ih @ react-dom.production.min.js:102
(anonymous) @ react-dom.production.min.js:114
$g @ react-dom.production.min.js:293
eb @ react-dom.production.min.js:51
eh @ react-dom.production.min.js:106
yb @ react-dom.production.min.js:76
ub @ react-dom.production.min.js:75
e.unstable_runWithPriority @ scheduler.production.min.js:19
cd @ react-dom.production.min.js:123
rb @ react-dom.production.min.js:293
Fb @ react-dom.production.min.js:74

Interestingly these particular errors go away when I turn on pseudo-names.

Does anyone have any idea what's going on here?

Answer 1

The easiest way to fix this is setting :compiler-options {:output-feature-set :es6}. $jscomp.inherits are the polyfills inserted by the Closure Compiler for transpiling class and other more "modern" constructs. Setting :es6 will stop that from happening. This is the best option unless you need to care about ancient browser versions.

Thanks for setting up a reproducible example. I can reproduce it with :simple, setting it to :advanced however works just fine? I have a rough idea what is happening in :simple and will see how to fix it properly.