npm clojurescript macos-monterey shadow-cljs clojurescript-javascript-interop

How to install and run shadow-cljs in an existing project folder while on macOS?

I am trying to install shadow-cljs in a MacOS Monterey 12.5. I am new to the Apple ecosystem, to npm, and Clojure/ClojureScript stack. This a new world for me.

This is the project folder, as you can see there is already a package.json file:

pedro@Pedros-MacBook-Air balance % ls -l1
LICENSE
README.md
config
dev.cljs.edn
docs
externs
firebase-deploy.my-instance-specific-variables.TEMPLATE.edn
firestore.rules.json
makefile
package-lock.json
package.json
project.clj
public
semantic
semantic.json
shadow-cljs.edn
src
tools

This is the content of the package.json file:

pedro@Pedros-MacBook-Air balance % cat package.json 
{
  "name": "xxxx",
  "version": "0.3.0",
  "description": "xxxx",
  "repository": {
    "type": "git",
    "url": "xxxxxxxxxxxxx.com"
  },
  "author": {
    "name": "xxxxxxxxx",
    "email": "xxxxxxx"
  },
  "license": "unlicensed",
  "scripts": {
    "dev": "shadow-cljs watch app;",
    "release": "shadow-cljs release app;",
    "server": "shadow-cljs server;",
    "clean": "rm -rf target; rm -rf public/js"
  },
  "dependencies": {
    "@firebase/app": "^0.4.22",
    "@firebase/auth": "^0.11.8",
    "@firebase/database": "^0.4.12",
    "@firebase/firestore": "^1.6.4",
    "@firebase/logger": "^0.1.28",
    "@firebase/webchannel-wrapper": "^0.2.29",
    "@js-joda/core": "3.2.0",
    "@js-joda/locale_en-us": "3.1.1",
    "@js-joda/timezone": "2.2.0",
    "@sheet/core": "^1.20191114.1",
    "create-react-class": "^15.6.3",
    "firebase": "5.7.3",
    "highlight.js": "^9.16.2",
    "process": "^0.11.10",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-flip-move": "^3.0.4",
    "react-highlight.js": "^1.0.7",
    "reactstrap": "^8.6.0",
    "semantic-ui": "^2.4.2",
    "semantic-ui-react": "^0.82.5",
    "smartystreets-javascript-sdk": "^1.9.2",
    "stripe": "^8.158.0",
    "tslib": "1.10.0"
  },
  "devDependencies": {
    "shadow-cljs": "2.15.3"
  }
}

The manual indicates:

If you have a package.json already and just want to add shadow-cljs run NPM

$ npm install --save-dev shadow-cljs

Hence, I did:

pedro@Pedros-MacBook-Air balance % npm install --save-dev shadow-cljs

Which retrieved the following error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @js-joda/[email protected]
npm ERR! Found: @js-joda/[email protected]
npm ERR! node_modules/@js-joda/core
npm ERR!   peer @js-joda/core@">=1.11.0" from @js-joda/[email protected]
npm ERR!   node_modules/@js-joda/locale_en-us
npm ERR!     @js-joda/locale_en-us@"3.1.1" from the root project
npm ERR!   @js-joda/core@"3.2.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @js-joda/core@"^1.11.0" from @js-joda/[email protected]
npm ERR! node_modules/@js-joda/timezone
npm ERR!   peer @js-joda/timezone@"^2.2.0" from @js-joda/[email protected]
npm ERR!   node_modules/@js-joda/locale_en-us
npm ERR!     @js-joda/locale_en-us@"3.1.1" from the root project
npm ERR!   @js-joda/timezone@"2.2.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @js-joda/[email protected]
npm ERR! node_modules/@js-joda/core
npm ERR!   peer @js-joda/core@"^1.11.0" from @js-joda/[email protected]
npm ERR!   node_modules/@js-joda/timezone
npm ERR!     peer @js-joda/timezone@"^2.2.0" from @js-joda/[email protected]
npm ERR!     node_modules/@js-joda/locale_en-us
npm ERR!       @js-joda/locale_en-us@"3.1.1" from the root project
npm ERR!     @js-joda/timezone@"2.2.0" 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/pedro/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/pedro/.npm/_logs/2022-08-01T14_36_59_868Z-debug-0.log

After reading other questions on Stack Overflow around upstream dependency conflict, I tried without success the following:

pedro@Pedros-MacBook-Air balance % npm install --legacy-peer-deps --save-dev shadow-cljs

Which returned a different error message on querystring legacy:

pedro@Pedros-MacBook-Air balance % npm install --legacy-peer-deps --save-dev shadow-cljs

npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm ERR! code 1
npm ERR! path /Users/pedro/projects/balance/node_modules/semantic-ui
npm ERR! command failed
npm ERR! command sh /var/folders/fh/7d_1drwd2ps3zw03j9ftkqs80000gn/T/install-64525ec5.sh
npm ERR! fs.js:47
npm ERR! } = primordials;
npm ERR!     ^
npm ERR! 
npm ERR! ReferenceError: primordials is not defined
npm ERR!     at fs.js:47:5
npm ERR!     at req_ (/Users/pedro/projects/balance/node_modules/natives/index.js:143:24)
npm ERR!     at Object.req [as require] (/Users/pedro/projects/balance/node_modules/natives/index.js:55:10)
npm ERR!     at Object.<anonymous> (/Users/pedro/projects/balance/node_modules/graceful-fs/fs.js:1:37)
npm ERR!     at Module._compile (node:internal/modules/cjs/loader:1120:14)
npm ERR!     at Module._extensions..js (node:internal/modules/cjs/loader:1174:10)
npm ERR!     at Module.load (node:internal/modules/cjs/loader:998:32)
npm ERR!     at Module._load (node:internal/modules/cjs/loader:839:12)
npm ERR!     at Module.require (node:internal/modules/cjs/loader:1022:19)
npm ERR!     at require (node:internal/modules/cjs/helpers:102:18)
npm ERR! 
npm ERR! Node.js v18.7.0

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/pedro/.npm/_logs/2022-08-01T14_45_00_773Z-debug-0.log

I also tried another suggestion:

pedro@Pedros-MacBook-Air balance % npm list --depth=3

Which retrieved:

[email protected] /Users/pedro/projects/balance
├── UNMET DEPENDENCY @firebase/app@^0.4.22
├── UNMET DEPENDENCY @firebase/auth@^0.11.8
├── UNMET DEPENDENCY @firebase/database@^0.4.12
├── UNMET DEPENDENCY @firebase/firestore@^1.6.4
├── UNMET DEPENDENCY @firebase/logger@^0.1.28
├── UNMET DEPENDENCY @firebase/webchannel-wrapper@^0.2.29
├── UNMET DEPENDENCY @js-joda/[email protected]
├── UNMET DEPENDENCY @js-joda/[email protected]
├── UNMET DEPENDENCY @js-joda/[email protected]
├── UNMET DEPENDENCY @sheet/core@^1.20191114.1
├── UNMET DEPENDENCY create-react-class@^15.6.3
├── UNMET DEPENDENCY [email protected]
├── UNMET DEPENDENCY highlight.js@^9.16.2
├── UNMET DEPENDENCY process@^0.11.10
├── UNMET DEPENDENCY react-dom@^16.11.0
├── UNMET DEPENDENCY react-flip-move@^3.0.4
├── UNMET DEPENDENCY react-highlight.js@^1.0.7
├── UNMET DEPENDENCY react@^16.11.0
├── UNMET DEPENDENCY reactstrap@^8.6.0
├── UNMET DEPENDENCY semantic-ui-react@^0.82.5
├── UNMET DEPENDENCY semantic-ui@^2.4.2
├── UNMET DEPENDENCY [email protected]
├── UNMET DEPENDENCY smartystreets-javascript-sdk@^1.9.2
├── UNMET DEPENDENCY stripe@^8.158.0
└── UNMET DEPENDENCY [email protected]

npm ERR! code ELSPROBLEMS
npm ERR! missing: @firebase/app@^0.4.22, required by [email protected]
npm ERR! missing: @firebase/auth@^0.11.8, required by [email protected]
npm ERR! missing: @firebase/database@^0.4.12, required by [email protected]
npm ERR! missing: @firebase/firestore@^1.6.4, required by [email protected]
npm ERR! missing: @firebase/logger@^0.1.28, required by [email protected]
npm ERR! missing: @firebase/webchannel-wrapper@^0.2.29, required by [email protected]
npm ERR! missing: @js-joda/[email protected], required by [email protected]
npm ERR! missing: @js-joda/[email protected], required by [email protected]
npm ERR! missing: @js-joda/[email protected], required by [email protected]
npm ERR! missing: @sheet/core@^1.20191114.1, required by [email protected]
npm ERR! missing: create-react-class@^15.6.3, required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: highlight.js@^9.16.2, required by [email protected]
npm ERR! missing: process@^0.11.10, required by [email protected]
npm ERR! missing: react-dom@^16.11.0, required by [email protected]
npm ERR! missing: react-flip-move@^3.0.4, required by [email protected]
npm ERR! missing: react-highlight.js@^1.0.7, required by [email protected]
npm ERR! missing: react@^16.11.0, required by [email protected]
npm ERR! missing: reactstrap@^8.6.0, required by [email protected]
npm ERR! missing: semantic-ui-react@^0.82.5, required by [email protected]
npm ERR! missing: semantic-ui@^2.4.2, required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: smartystreets-javascript-sdk@^1.9.2, required by [email protected]
npm ERR! missing: stripe@^8.158.0, required by [email protected]
npm ERR! missing: [email protected], required by [email protected]

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/pedro/.npm/_logs/2022-08-01T14_44_49_026Z-debug-0.log
pedro@Pedros-MacBook-Air balance % npm install --legacy-peer-deps --save-dev shadow-cljs
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm ERR! code 1
npm ERR! path /Users/pedro/projects/balance/node_modules/semantic-ui
npm ERR! command failed
npm ERR! command sh /var/folders/fh/7d_1drwd2ps3zw03j9ftkqs80000gn/T/install-64525ec5.sh
npm ERR! fs.js:47
npm ERR! } = primordials;
npm ERR!     ^
npm ERR! 
npm ERR! ReferenceError: primordials is not defined
npm ERR!     at fs.js:47:5
npm ERR!     at req_ (/Users/pedro/projects/balance/node_modules/natives/index.js:143:24)
npm ERR!     at Object.req [as require] (/Users/pedro/projects/balance/node_modules/natives/index.js:55:10)
npm ERR!     at Object.<anonymous> (/Users/pedro/projects/balance/node_modules/graceful-fs/fs.js:1:37)
npm ERR!     at Module._compile (node:internal/modules/cjs/loader:1120:14)
npm ERR!     at Module._extensions..js (node:internal/modules/cjs/loader:1174:10)
npm ERR!     at Module.load (node:internal/modules/cjs/loader:998:32)
npm ERR!     at Module._load (node:internal/modules/cjs/loader:839:12)
npm ERR!     at Module.require (node:internal/modules/cjs/loader:1022:19)
npm ERR!     at require (node:internal/modules/cjs/helpers:102:18)
npm ERR! 
npm ERR! Node.js v18.7.0

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/pedro/.npm/_logs/2022-08-01T14_45_00_773Z-debug-0.log

Using the global flag also did not solve:

pedro@Pedros-MacBook-Air balance % npm install -g npm                                   


changed 14 packages, and audited 202 packages in 1s

11 packages are looking for funding
  run `npm fund` for details

I am unsure about what else to try.

Any suggestion? Did I miss something?

Observation.: I am able to successfully run the quick start example on GitHub README of shadow-cljs repo.

Last login: Mon Aug 1 16:40:55 on ttys000
pedro@Pedros-MacBook-Air ~ % cd projects 
pedro@Pedros-MacBook-Air projects % cd acme-app 
pedro@Pedros-MacBook-Air acme-app % npx shadow-cljs node-repl
shadow-cljs - config: /Users/pedro/projects/acme-app/shadow-cljs.edn
shadow-cljs - server version: 2.19.8 running at http://localhost:9630
shadow-cljs - nREPL server started on port 50748
cljs.user=> shadow-cljs - #4 ready!
(+ 99 1)
100

Thanks.

Solution

When you have an existing project like this you just run npm install, without any additional arguments, to install all the dependencies listed in package.json. npm ci also works, which is sort for clean-install, if you have an existing package-lock.json it'll ensure to install the exact versions that were previously used.

However, your project seems to be a bit dated which means that the npm version you use may be newer than the one used at the time the project was created. This is why you may need to run npm install --legacy-peer-deps instead.

When you do npm install shadow-cljs (or any other variant you tried) it'll tell npm to only install shadow-cljs and ignore the rest, which explains all the unmet dependencies.