Build and deploy fails with Node 16.15
eatyourgreens opened this issue · 9 comments
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: eslint-config-airbnb@17.1.1
npm ERR! Found: eslint-plugin-import@2.16.0
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 eslint-config-airbnb@17.1.1
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: eslint-plugin-import@2.26.0
npm ERR! node_modules/eslint-plugin-import
npm ERR! peer eslint-plugin-import@"^2.18.0" from eslint-config-airbnb@17.1.1
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
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.
#6154 is a temporary fix that pins Node to 16.13 for builds.
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?
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: eslint-config-airbnb@17.1.1
npm ERR! Found: eslint-plugin-import@2.16.0
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 eslint-config-airbnb@17.1.1
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: eslint-plugin-import@2.26.0
npm ERR! node_modules/eslint-plugin-import
npm ERR! peer eslint-plugin-import@"^2.18.0" from eslint-config-airbnb@17.1.1
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🅱️ eslint-plugin@2.18.0 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.
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: reach-chartist@0.13.3 has chartist@0.10.1 as a sub-dep, but we've defined package.json: chartist@0.11.4
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 inmain.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...
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 react@17.02)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.2.0" from react-interpolate-component@0.12.0
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 react-translate-component@0.15.1
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: react@16.14.0
npm ERR! node_modules/react
npm ERR! peer react@"^16.2.0" from react-interpolate-component@0.12.0
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 react-translate-component@0.15.1
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.
I’d suggest trying a build with the --legacy-peer-deps
flag.
Closed by #6203.