ink: invalid hook call + reagent-cursor cannot be resolved about nbb

[borkdude]

@MrGung I'm happy this problem is now resolved! It was a difficult one to get right, but I think we've finally got it now.

[borkdude]

@MrGung I tried this yesterday:

(ns reagent
  (:require [reagent.core :as r]
            ["react" :as react]
            ["ink" :refer [render Text]]))

(defn example []
  (let [[count set-count] (react/useState 0)]
    (react/useEffect (fn []
                       (let [timer (js/setInterval #(set-count (inc count)) 500)]
                         (fn []
                           (js/clearInterval timer)))))
    [:> Text {:color "green"} "Hello, world! " count]))

(defn root []
  [:f> example])

(render (r/as-element [root]))

but only when installing nbb locally alongside ink and with Node v16. Can you provide the nodeJS version and wether you are using nbb locally or globally?

[borkdude]

The r/cursor one is fixable: we can expose this, but it's currently not exposed.

[MrGung]

I was running Node v14 and had nbb installed globally.

I've upgraded to Node v16 and installed nbb locally - trying your code I get this error:

>nbb reagent.cljs 

  ERROR  Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
        1. You might have mismatching versions of React and the renderer (such as React DOM)
        2. You might be breaking the Rules of Hooks
        3. You might have more than one copy of React in the same app
        See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

 - 1. You might have mismatching versions of React and the renderer (such as React DOM)
 - 2. You might be breaking the Rules of Hooks
 - 3. You might have more than one copy of React in the same app
 - See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
 - resolveDispatcher (node_modules/nbb/node_modules/react/cjs/react.development.js:1476:13)
 - Module.useState (node_modules/nbb/node_modules/react/cjs/react.development.js:1507:20)
 - Q9 (file:///c:/Users/Steffen/Documents/Steffen/DEV/clojure/nbb/list-selector/node_modules/nbb/out/nbb_reagent.js:25:133)
 - c (file:///c:/Users/Steffen/Documents/Steffen/DEV/clojure/nbb/list-selector/node_modules/nbb/out/nbb_reagent.js:26:301)
 - renderWithHooks (node_modules/react-reconciler/cjs/react-reconciler.development.js:6036:18)
 - mountIndeterminateComponent (node_modules/react-reconciler/cjs/react-reconciler.development.js:8570:13)
 - beginWork$1 (node_modules/react-reconciler/cjs/react-reconciler.development.js:9938:16)
 - Object.invokeGuardedCallbackImpl (node_modules/react-reconciler/cjs/react-reconciler.development.js:11563:10)
 - invokeGuardedCallback (node_modules/react-reconciler/cjs/react-reconciler.development.js:11740:31)
 - beginWork$$1 (node_modules/react-reconciler/cjs/react-reconciler.development.js:15778:7)

(I am on Windows. It seems I've got issues with npx - don't know whether this is of relevance...)

[MrGung]

The r/cursor one is fixable: we can expose this, but it's currently not exposed.

Exposing cursor would allow cleaner code, I think, so that would be great.

[borkdude]

Try installing all of the deps locally with npm install nbb, ink and then invoke it using npx or $(npm bin)/nbb (or whatever the Windows equivalent is). Invoking nbb will still execute the global nbb. Deinstall it to make sure you're not calling that one.

[MrGung]

No success deinstalling nbb globally. Same error.

Here's what my package.json looks like:

{
  "dependencies": {
    "ink": "^3.0.9",
    "nbb": "^0.0.45"
  }
}

As I got the non-nbb version working I noticed a dependency conflict between ink (requiring react ^16) and nbb (shipping with react ^17). But obviously that doesn't pose a general problem (ink lacks updates it seems).

npx does not work on my machine - I'll investigate that...

[borkdude]

If you didn't use npx to run nbb, how did you run it if you didn't install it globally?

I think I need to run with a patched version of reagent so it will pick up on the local react install.

Perhaps forcing React 17 in your package.json might help?

[MrGung]

Right. I had added a batch-file in the repo-root to start nbb in node_modules/.bin. So I could use nbb locally without npx.
(npx not working was caused by an alternative terminal I just started using.)

In the repo without nbb I force-installed React 17 - and that works. I.e. my script works with what I suppose mimics nbb's dependencies - but it does (still) not work with nbb.

I will try on another PC...

[MrGung]

So I tried another PC by cloning my repo https://github.com/MrGung/list-selector, doing npm install and calling the scripts with npx: neither your nor my script work: npx nbb reagent.cljs; npx nbb list-selector.cljs

npx nbb ink-demo.cljs (from nbb's site) does work.

I then installed nbb locally: npm install nbb - and executed the above commands again. Still:

>npx nbb list-selector.cljs

  ERROR Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for
       one of the following reasons:
       1. You might have mismatching versions of React and the renderer (such as React DOM)
       2. You might be breaking the Rules of Hooks
       3. You might have more than one copy of React in the same app
       See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

 - 1. You might have mismatching versions of React and the renderer (such as React DOM)
 - 2. You might be breaking the Rules of Hooks
 - 3. You might have more than one copy of React in the same app
 - See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
 - Vl (file:///C:/Users/Steffen/Documents/Code/clojure/nbb/list-selector/node_modules/nbb/out/nbb_core.js:161:26)
 -Function.$APP.Uo. (file:///C:/Users/Steffen/Documents/Code/clojure/nbb/list-selector/node_modules/nbb/out/nbb_core.js
                   :1212:319)
 -  (file:///C:/Users/Steffen/Documents/Code/clojure/nbb/list-selector/node_modules/nbb/out/nbb_core.js:203:447)
 - Zo (file:///C:/Users/Steffen/Documents/Code/clojure/nbb/list-selector/node_modules/nbb/out/nbb_core.js:204:169)
 - U (file:///C:/Users/Steffen/Documents/Code/clojure/nbb/list-selector/node_modules/nbb/out/nbb_core.js:272:259)
 -  (file:///C:/Users/Steffen/Documents/Code/clojure/nbb/list-selector/node_modules/nbb/out/nbb_core.js:440:82)
 - U (file:///C:/Users/Steffen/Documents/Code/clojure/nbb/list-selector/node_modules/nbb/out/nbb_core.js:272:75)
 - c.pc (file:///C:/Users/Steffen/Documents/Code/clojure/nbb/list-selector/node_modules/nbb/out/nbb_core.js:274:215)
 -  (file:///C:/Users/Steffen/Documents/Code/clojure/nbb/list-selector/node_modules/nbb/out/nbb_reagent.js:16:347)
 - v9 (file:///C:/Users/Steffen/Documents/Code/clojure/nbb/list-selector/node_modules/nbb/out/nbb_reagent.js:17:134)

Calling reagent.cljs gives the same stacktrace as already provided further up.

Could this possibly be a Windows-thing!?

[borkdude]

Please specify the version of node and react you were using above.

I'm working on a better fix where nbb itself no longer brings in React but just reagent and it then loads React dynamically relative to your script (so it should use the version of React that Ink depends on).

[borkdude]

Can you also try the examples from Usage here: https://github.com/borkdude/nbb#usage
To see if they work for you?

[MrGung]

I cloned nbb and exercised the examples - all seemed to work fine.

I have node 16.7.0 installed.

I just installed latest react (I didn't have it installed previously). My package.json now is:

{
  "dependencies": {
    "ink": "^3.0.9",
    "react": "^17.0.2"
  }
}

I am calling via npx nbb reagent.cljs.

Whether I have react installed or not does not make a difference in the error.

Should react currently be installed explicitly?

[borkdude]

@MrGung OK, I just published v0.0.46 which no longer has any dependencies of itself and always picks the dependency relative to the script. So if you npm install ink then it should pick the React version that was installed with ink. Please try again with nbb v0.046. To make sure delete node_modules and uninstall relevant stuff first.

[borkdude]

Make that 0.0.47.

[MrGung]

I now get a different error:

>npx nbb ink-demo.cljs
#error {:message "Cannot read property 'prototype' of undefined", :data {:type :sci/error, :line 13, :column 9, :message "Cannot read property 'prototype' of undefined", :sci.impl/callstack #object[cljs.core.Delay {:status :pending, :val nil}], :file "C:\\Users\\Steffen\\Documents\\Code\\clojure\\nbb\\list-selector\\ink-demo.cljs", :locals {}}, :cause #object[TypeError TypeError: Cannot read property 'prototype' of undefined]}

Line 13 of ink-demo.cljs is (render (r/as-element [hello])).

I deleted node_modules and npm installed with this package.json:

{
  "dependencies": {
    "ink": "^3.0.9",
    "nbb": "^0.0.47"
  }
}

[borkdude]

Should be fixed with v0.0.48.

[borkdude]

Added r/cursor in v0.0.49.

[borkdude]

Tested on Windows myself now. Seems to work!

[MrGung]

Yes - I just finished my tests. Your scripts now 'just work'.

After switching to a 'functional component' (:f>), the hook also works in my script (with cursors).

Thanks a lot! And sorry for the haziness.