Comments (20)
@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.
from nbb.
@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?
from nbb.
The r/cursor
one is fixable: we can expose this, but it's currently not exposed.
from nbb.
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...)
from nbb.
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.
from nbb.
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.
from nbb.
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...
from nbb.
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?
from nbb.
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...
from nbb.
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!?
from nbb.
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).
from nbb.
Can you also try the examples from Usage here: https://github.com/borkdude/nbb#usage
To see if they work for you?
from nbb.
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?
from nbb.
@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.
from nbb.
Make that 0.0.47.
from nbb.
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"
}
}
from nbb.
Should be fixed with v0.0.48.
from nbb.
Added r/cursor
in v0.0.49.
from nbb.
Tested on Windows myself now. Seems to work!
from nbb.
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.
from nbb.
Related Issues (20)
- Support :init option when creating a repl HOT 8
- Incorrect path resolution for nbb.edn local deps HOT 3
- Support print known deps for a nbb.edn file
- PersistentQueue.EMPTY is nil HOT 2
- Incrementing a keyword HOT 1
- nbb fails to download nbb.edn deps when babashka is not in the PATH HOT 6
- nrepl: println does not print the NL when called from inside js timeout HOT 14
- nbb's nREPL crashes if we disconnect without waiting for all output
- Remove todo from nrepl version string HOT 2
- Using from node.js - more sandboxing? HOT 10
- Could not resolve symbol: `re-matcher` HOT 1
- Add `:reload` Support HOT 4
- Promesa promisify is missing HOT 4
- `exists?` missing? HOT 6
- couldn't find 'java' when using `nbb` in a docker container HOT 2
- Incorrect markdown link formatting
- update bun docs HOT 1
- `clj-kondo` doesn't recognize promesa `p/let` HOT 1
- Testing macro messages not showing up in test output HOT 9
- Missing newlines when using `with-out-str` and `pprint/print-table` HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nbb.