The required namespace "react" is not available about re-frame-template

[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 '[email protected]',
0 verbose cli '[email protected]',
0 verbose cli '[email protected]',
0 verbose cli '[email protected]'
0 verbose cli ]
1 info using [email protected]
2 info using [email protected]
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 [email protected]
26 timing arborist:ctor Completed in 1ms
27 http fetch GET 200 https://registry.npmjs.org/react 168ms
28 silly fetch manifest [email protected]
29 http fetch GET 200 https://registry.npmjs.org/react-dom 43ms
30 silly fetch manifest [email protected]
31 http fetch GET 304 https://registry.npmjs.org/highlight.js 40ms (from cache)
32 silly fetch manifest [email protected]
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" "[email protected]" "[email protected]" "[email protected]" "[email protected]"
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: [email protected]
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 [email protected]
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: [email protected]
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 [email protected]
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 [email protected]: 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 :-)