The required namespace "react" is not available

[danielmartincraig]

Hi, I'm running into a problem when creating a new re-frame app. When I run lein watch for the first time, I get the following result, culminating in 'The required namespace "react" is not available.'

user@computer Repos % lein new re-frame givediapers +10x +cider OpenJDK 64-Bit Server VM warning: Options -Xverify:none and -noverify were deprecated in JDK 13 and will likely be removed in a future release. Retrieving re-frame/lein-template/1.4.2/lein-template-1.4.2.pom from clojars Retrieving re-frame/lein-template/1.4.2/lein-template-1.4.2.jar from clojars Generating re-frame project.

user@computer Repos % cd givediapers

user@computer givediapers % lein watch

OpenJDK 64-Bit Server VM warning: Options -Xverify:none and -noverify were deprecated in JDK 13 and will likely be removed in a future release. Retrieving cider/cider-nrepl/0.25.6/cider-nrepl-0.25.6.pom from clojars Retrieving cider/cider-nrepl/0.25.6/cider-nrepl-0.25.6.jar from clojars lein-shadow - running: npm --version lein-shadow - 'npm' version 7.6.0

lein-shadow - found existing package.json file at /Users/user/Repos/givediapers/package.json lein-shadow - reading node dependencies from /Users/user/Repos/givediapers/src/cljs/deps.cljs lein-shadow - node package shadow-cljs@2.11.21 does not exist in package.json. Adding. lein-shadow - running: npm install --save-dev --save-exact shadow-cljs@2.11.21 lein-shadow - node dev packages added successfully:

added 96 packages, and audited 97 packages in 2s

3 packages are looking for funding run npm fund for details

found 0 vulnerabilities

lein-shadow - running shadow-cljs... Retrieving org/clojure/clojure/1.10.3/clojure-1.10.3.pom from central Retrieving thheller/shadow-cljs/2.11.21/shadow-cljs-2.11.21.pom from clojars Retrieving thheller/shadow-undertow/0.1.0/shadow-undertow-0.1.0.pom from clojars Retrieving io/undertow/undertow-core/2.2.4.Final/undertow-core-2.2.4.Final.pom from central Retrieving io/undertow/undertow-parent/2.2.4.Final/undertow-parent-2.2.4.Final.pom from central Retrieving day8/re-frame/re-frame-10x/1.0.1/re-frame-10x-1.0.1.pom from clojars Retrieving io/undertow/undertow-core/2.2.4.Final/undertow-core-2.2.4.Final.jar from central Retrieving org/clojure/clojure/1.10.3/clojure-1.10.3.jar from central Retrieving thheller/shadow-undertow/0.1.0/shadow-undertow-0.1.0.jar from clojars Retrieving day8/re-frame/re-frame-10x/1.0.1/re-frame-10x-1.0.1.jar from clojars Retrieving thheller/shadow-cljs/2.11.21/shadow-cljs-2.11.21.jar from clojars running: npm install --save --save-exact react@17.0.1 react-dom@17.0.1 highlight.js@9.18.1 react-highlight.js@1.0.7 npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: givediapers@undefined npm ERR! Found: react@17.0.1 npm ERR! node_modules/react npm ERR! react@"17.0.1" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^0.14.0 || ^15.0.0 || ^16.0.0" from react-highlight.js@1.0.7 npm ERR! node_modules/react-highlight.js npm ERR! react-highlight.js@"1.0.7" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See /Users/user/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in: npm ERR! /Users/user/.npm/_logs/2021-03-17T14_21_07_098Z-debug.log No config for build "browser-test" found. No config for build "karma-test" found. shadow-cljs - HTTP server available at http://localhost:8280 shadow-cljs - server version: 2.11.21 running at http://localhost:9630 shadow-cljs - nREPL server started on port 8777 shadow-cljs - watching build :app [:app] Configuring build. [:app] Compiling ... [:app] Build failure: The required namespace "react" is not available, it was required by "day8/re_frame_10x/inlined_deps/reagent/v1v0v0/reagent/core.cljs".

^C%

[danielmartincraig]

This is the contents of /Users/user/.npm/eresolve-report.txt 0 verbose cli [ 0 verbose cli '/usr/local/Cellar/node/15.11.0/bin/node', 0 verbose cli '/usr/local/bin/npm', 0 verbose cli 'install', 0 verbose cli '--save', 0 verbose cli '--save-exact', 0 verbose cli 'react@17.0.1', 0 verbose cli 'react-dom@17.0.1', 0 verbose cli 'highlight.js@9.18.1', 0 verbose cli 'react-highlight.js@1.0.7' 0 verbose cli ] 1 info using npm@7.6.0 2 info using node@v15.11.0 3 timing config:load:defaults Completed in 1ms 4 timing config:load:file:/usr/local/lib/node_modules/npm/npmrc Completed in 1ms 5 timing config:load:builtin Completed in 1ms 6 timing config:load:cli Completed in 1ms 7 timing config:load:env Completed in 1ms 8 timing config:load:file:/Users/user/Repos/givediapers/.npmrc Completed in 0ms 9 timing config:load:project Completed in 0ms 10 timing config:load:file:/Users/user/.npmrc Completed in 0ms 11 timing config:load:user Completed in 0ms 12 timing config:load:file:/usr/local/etc/npmrc Completed in 0ms 13 timing config:load:global Completed in 0ms 14 timing config:load:cafile Completed in 1ms 15 timing config:load:validate Completed in 0ms 16 timing config:load:setUserAgent Completed in 0ms 17 timing config:load:setEnvs Completed in 1ms 18 timing config:load Completed in 6ms 19 verbose npm-session 01dc0e08c6576c62 20 timing npm:load Completed in 13ms 21 timing arborist:ctor Completed in 1ms 22 timing idealTree:init Completed in 57ms 23 timing idealTree:userRequests Completed in 1ms 24 silly idealTree buildDeps 25 silly fetch manifest react@17.0.1 26 timing arborist:ctor Completed in 1ms 27 http fetch GET 200 https://registry.npmjs.org/react 168ms 28 silly fetch manifest react-dom@17.0.1 29 http fetch GET 200 https://registry.npmjs.org/react-dom 43ms 30 silly fetch manifest highlight.js@9.18.1 31 http fetch GET 304 https://registry.npmjs.org/highlight.js 40ms (from cache) 32 silly fetch manifest react-highlight.js@1.0.7 33 http fetch GET 304 https://registry.npmjs.org/react-highlight.js 422ms (from cache) 34 silly fetch manifest react@^0.14.0 || ^15.0.0 || ^16.0.0 35 timing idealTree Completed in 765ms 36 timing command:install Completed in 768ms 37 verbose stack Error: unable to resolve dependency tree 37 verbose stack at Arborist.[failPeerConflict] (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:1141:25) 37 verbose stack at Arborist.[loadPeerSet] (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:1118:34) 37 verbose stack at async Arborist.[buildDepStep] (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:836:11) 37 verbose stack at async Arborist.buildIdealTree (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:209:7) 37 verbose stack at async Promise.all (index 1) 37 verbose stack at async Arborist.reify (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/reify.js:130:5) 37 verbose stack at async install (/usr/local/lib/node_modules/npm/lib/install.js:38:3) 38 verbose cwd /Users/user/Repos/givediapers 39 verbose Darwin 19.6.0 40 verbose argv "/usr/local/Cellar/node/15.11.0/bin/node" "/usr/local/bin/npm" "install" "--save" "--save-exact" "react@17.0.1" "react-dom@17.0.1" "highlight.js@9.18.1" "react-highlight.js@1.0.7" 41 verbose node v15.11.0 42 verbose npm v7.6.0 43 error code ERESOLVE 44 error ERESOLVE unable to resolve dependency tree 45 error 46 error While resolving: givediapers@undefined 46 error Found: react@17.0.1 46 error node_modules/react 46 error react@"17.0.1" from the root project 46 error 46 error Could not resolve dependency: 46 error peer react@"^0.14.0 || ^15.0.0 || ^16.0.0" from react-highlight.js@1.0.7 46 error node_modules/react-highlight.js 46 error react-highlight.js@"1.0.7" from the root project 46 error 46 error Fix the upstream dependency conflict, or retry 46 error this command with --force, or --legacy-peer-deps 46 error to accept an incorrect (and potentially broken) dependency resolution. 46 error 46 error See /Users/user/.npm/eresolve-report.txt for a full report. 47 verbose exit 1

[lowecg]

I've experienced this, too.

even if you run npm add react, the next build run will fail due to a missing dependency for "react-highlight.js":

$ lein watch
...
[:app] Configuring build.
[:app] Compiling ...
[:app] Build failure:
The required JS dependency "react-highlight.js" is not available, it was required by "day8/re_frame_10x/view/components.cljs".

Dependency Trace:
    day8/re_frame_10x/preload.cljs
    day8/re_frame_10x.cljs
    day8/re_frame_10x/styles.cljs
    day8/re_frame_10x/view/app_db.cljs
    day8/re_frame_10x/view/components.cljs

I cannot get this to install with react 17:

$ npm add react-highlight.js
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: demo@undefined
npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.0 || ^15.0.0 || ^16.0.0" from react-highlight.js@1.0.7
npm ERR! node_modules/react-highlight.js
npm ERR!   react-highlight.js@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

This is a surprising impasse since 10x v1.0.x is supposed to be compatible with react 17.

[lowecg]

If you edit package.json as follows and install using --force, 10x works:

{
    "name": "YOUR_NAME_HERE",
    "devDependencies": {
        "highlight.js": "9.18.1",
        "react-highlight.js": "1.0.7"
    },
    "dependencies": {
        "react": "17.0.1",
        "react-dom": "17.0.1"
    }
}

$ npm install --force
npm WARN using --force Recommended protections disabled.
npm WARN deprecated highlight.js@9.18.1: Version no longer supported. Upgrade to @latest

added 105 packages, and audited 106 packages in 1s

found 0 vulnerabilities

$ lein watch
...
[:app] Configuring build.
[:app] Compiling ...
[:app] Build completed. (527 files, 526 compiled, 0 warnings, 26.01s)

And on launching the app, the 10x UI displays fine.

[superstructor]

Thanks for reporting the issue @danielappelt the updates @lowecg

I've traced the root cause of this to react-highlight.js being unmaintained and having a very old peer dependency for react. This has become an issue because the latest NPM release is more strict than it used to be.

I'll fix the issue by changing re-frame-10x to use a pure reagent wrapper for highlight.js (i.e. no react-highlight.js and thus no peer dependency issues).

[danielmartincraig]

Thanks!!!

[superstructor]

Fixed in v1.5.0.

[lowecg]

thank you :-)