Does the syntax work on your machines somehow it’s giving me error?
when calling lifecycle function guestbook.core/mount-components Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in.
The [:<> ...] syntax works fine for me. The error message you’re getting looks like something wrong with one of the inner components. Try something like: [:<> [:h1 "Foo"] [:p "lorem ipsum"]] to make sure that its not an issue with the syntax. If that gives you problems then let me know.
On page 241, we introduce the image and image-uploader components, so it could be the case that you forgot to require and refer them in the namespace declaration. You can check that they’re present from the REPL like so:
cljs.user> (in-ns 'guestbook.views.profile)
guestbook.views.profile> (fn? image)
true
guestbook.views.profile> (fn? image-uploader)
true
Or more generally, you can try commenting out each component inside your [:<> ...] form until it works, and then uncomment until you find the offending component and debug from there.
If you’re still stuck, share the code snippet you’re working with and I’ll see if I can identify the specific issue.
I change :<> to :div and it works. Now that I think about this perhaps it has to do with the react version I’m using in package.json file. Earlier npm was complaining this
$ npm install
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-highlight.js@1.0.7
npm WARN Found: react@17.0.1
npm WARN node_modules/react
npm WARN react@“17.0.1” from the root project
npm WARN 1 more (react-dom)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@“^0.14.0 || ^15.0.0 || ^16.0.0” from react-highlight.js@1.0.7
npm WARN node_modules/react-highlight.js
npm WARN
npm WARN Conflicting peer dependency: react@16.14.0
npm WARN node_modules/react
npm WARN peer react@“^0.14.0 || ^15.0.0 || ^16.0.0” from react-highlight.js@1.0.7
npm WARN node_modules/react-highlight.js
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-highlight.js@1.0.7
npm WARN Found: react-dom@17.0.1
npm WARN node_modules/react-dom
npm WARN react-dom@“17.0.1” from the root project
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-dom@“^0.14.0 || ^15.0.0 || ^16.0.0” from react-highlight.js@1.0.7
npm WARN node_modules/react-highlight.js
npm WARN
npm WARN Conflicting peer dependency: react-dom@16.14.0
npm WARN node_modules/react-dom
npm WARN peer react-dom@“^0.14.0 || ^15.0.0 || ^16.0.0” from react-highlight.js@1.0.7
npm WARN node_modules/react-highlight.js
so I specified react “16.0.0” as a workaround. Do you have 17.0.1 (page 120) and not getting any errors?
We did use react 17 and react-dom 17. It’s possible that there were warnings, but we didn’t encounter any errors.
the reason that you’re encountering the issue is because fragments (the react feature behind reagent’s :<>) was introduced in 16.2.0, so it isn’t present in 16.0.0. If 17.0.1 works despite the warnings, I’d recommend using it. The warnings are coming from react-highlight having out-of-date react dependencies. This is not worrying because react-highlight is only being used for re-frame-10x, and so it doesn’t have any impact on application functionality.
Warnings from NPM like these are common, and can often be resolved or reduced by trimming any unnecessary declared dependencies, and installing the most recent compatible version of any packages that shadow-cljs notices are missing.
If 17.0.1 (version we used) or 17.0.2 (most recent version) don’t work for you, try 16.14.0 (relatively recent version of react 16) instead of going all the way back to 16.0.0.
Sorry I am not particularly good at reading those supposedly WARN messages. They are more like ERR messages cause they prevent shadow watch from running.
16.14.0 works. Thanks for taking the time to solve non clojure/luminus issue.