Build and deploy fails with Node 16.15

[eatyourgreens]

Expected behavior

Builds work with any version of Node 16.

Current behavior

Builds with Node 16.15 fail with unmatched peer dependency errors. It seems that Node 16.15.1/npm 8.11 is more strict about nested dependencies than previous versions.

Panoptes-Front-End odonnell$ npm ci
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/eslint-plugin-import
npm ERR!   dev eslint-plugin-import@"~2.16.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer eslint-plugin-import@"^2.18.0" from [email protected]
npm ERR! node_modules/eslint-config-airbnb
npm ERR!   dev eslint-config-airbnb@"~17.1.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/eslint-plugin-import
npm ERR!   peer eslint-plugin-import@"^2.18.0" from [email protected]
npm ERR!   node_modules/eslint-config-airbnb
npm ERR!     dev eslint-config-airbnb@"~17.1.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/odonnell/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/odonnell/.npm/_logs/2022-06-14T15_32_38_682Z-debug-0.log

Steps to replicate

The latest version that I can get to work is Node 16.14 with npm 8.5.

nvm install 16.13
npm ci
nvm install 16.14
npm ci
nvm install 16.15
npm ci

[eatyourgreens]

I fixed this in pandora by removing or replacing outdated dependencies: zooniverse/pandora#294

That might not be possible in PFE, which has a much larger dependency tree.

[eatyourgreens]

#6154 is a temporary fix that pins Node to 16.13 for builds.

[shaunanoordin]

I'm poking around to see if I can find any leads on this issue. Thoughts so far:

• I just ran nvm install 16.15 , and I can correctly replicate the issue with node 16.15.1 and npm 8.11.0 (macOS's zsh). This is a good starting point
• Wait, the problem here is with the eslint dependencies? That's interesting, I had similar build issues on Classrooms (#352) and that was a result of eslint-loader, which turns out, wasn't even being used in the code anymore. What is up with these eslint dudes?

[shaunanoordin]

Investigation Progress

These are mostly notes for myself so I don't get lost. Feel free to ignore this post.

Part 1: Investigation process

So starting off, ensure we're on the correct baseline - delete node_modules, check we're on the latest master commit (e83dd4e), and check we're using node 16.15(.1 and npm 8.11.0).

Then, run npm ci and we to find out what the problems are:

npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/eslint-plugin-import
npm ERR!   dev eslint-plugin-import@"~2.16.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer eslint-plugin-import@"^2.18.0" from [email protected]
npm ERR! node_modules/eslint-config-airbnb
npm ERR!   dev eslint-config-airbnb@"~17.1.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/eslint-plugin-import
npm ERR!   peer eslint-plugin-import@"^2.18.0" from [email protected]
npm ERR!   node_modules/eslint-config-airbnb
npm ERR!     dev eslint-config-airbnb@"~17.1.0" from the root project

Now, the debugging.

• Analysis: These error messages mean that in package.json, we specified 🅰️ "eslint-config-airbnb": "~17.1.0", and that has 🅱️ [email protected] as a sub-dependency... but we already specified 🅱️ "eslint-plugin-import": "~2.16.0" in package.json. OK, pretty straightforward conflict.
• Solution: We update package.json to use "eslint-plugin-import": "~2.18.0"

OK, so npm ci will report one (family of) conflicts at a time. Working hypothesis for solving this is to identify which "down the chain" package has conflicts, and find a version that all the "up the chain" packages can agree on.

Repeating this process, I end up with:

"eslint-plugin-import": "~2.18.0",
"eslint-plugin-react": "~7.30.0",

OK, progress. Nothing can go wrong now.

Part 2: Things go wrong

Whoops.

• We're using "modal-form": "~2.9" which is causing conflict because it's relying on react 16.2, and we've already defined "react": "~17.0.2".
• Bad news: modal-form is deprecated!
• Good news: modal-form is ours! (Wait, the npmjs page says I contributed to this? When did that happen?)

Next action: update modal-form to use react 17, bump the version to 2.10, and publish. (I wonder what other repos use modal-form?) Then come back to PFE.

[shaunanoordin]

Investigation Progress

Part 3: Things go Un-Wrong

I have a PR that bumps modal-form to v2.10, using React 17: zooniverse/modal-form#50 . This seems to work when tested locally (i.e. have the modal-form repo on my machine then set "modal-form": "file:../modal-form" in package.json).

I'll get that PR ready for review, and publish v2.10 once that's approved/merged, but in the meantime I'm keeping my "modal-form": "file:../modal-form" in this branch, so erm... sorry, Github Actions! You're going to have some headaches.

Next up: package.json: [email protected] has [email protected] as a sub-dep, but we've defined package.json: [email protected]

[shaunanoordin]

Investigation Progress

Part 4: (deflated charting noises)

New updates:

"react-chartist": "~0.14.4"  // this is the latest version, and only one that supports React 17
"chartist": "~0.10.0"  // bumped DOWN because react-chartist doesn't accept v0.11.x

TODO:

• Check that charts work properly in PFE
  • chartist is only used in main.styl's @require '../node_modules/chartist/dist/chartist.min.css' but since this is a UI/component thing, it may be very important.
  • react-chartist is used in the project stats

(Hmm I should move these TODOs to an official PR with my debug branch)

Next up: react-translate-component@"~0.15.1" requires React 16. Yokay...

[shaunanoordin]

Investigation Process

Part 5: Translate, the first major headache

OK, going to need some help with this next one. Current error is...

npm ERR! (bla bla bla every other component is using [email protected])
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.2.0" from [email protected]
npm ERR! node_modules/react-interpolate-component
npm ERR!   react-interpolate-component@"~0.12.0" from the root project
npm ERR!   peer react-interpolate-component@"^0.12.0" from [email protected]
npm ERR!   node_modules/react-translate-component
npm ERR!     react-translate-component@"~0.15.1" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@"^16.2.0" from [email protected]
npm ERR!   node_modules/react-interpolate-component
npm ERR!     react-interpolate-component@"~0.12.0" from the root project
npm ERR!     peer react-interpolate-component@"^0.12.0" from [email protected]
npm ERR!     node_modules/react-translate-component
npm ERR!       react-translate-component@"~0.15.1" from the root project

Here's the problem:

• react-translate-component has been stuck at 0.15.1 for 4 years
• The dependency is used about 100 files and it provides the <Translate /> component
• Replacing this seems inevitable (and probably worth me spinning up its own issue or PR) but I need to discuss what's the best way forward for PFE translations dependencies. I don't want to reinvent the wheel since I know we've been doing some major translation work on FEM already.

I'll plonk this on the dev-frontend chat for further discussion.

[eatyourgreens]

I’d suggest trying a build with the --legacy-peer-deps flag.

[eatyourgreens]

Closed by #6203.