Frontend library bumps #95

mbarton · 2021-09-22T18:58:44Z

The project is over a year old, a lifetime in the wonderful NPM ecosystem. I've gone through updating our dependencies and removing some that we don't use. I've done a quick smoke test manually on Firefox and Safari and things still seem fine.

I've added inline comments explaining the decisions I've taken as I went along

…arnings

…create-react-app#11174 This allows us to run `npm audit --production` and see actual vulnerabilities we might care about, not thousands of irrelevant Regex DoS CVEs in transitive dependencies of our build tooling.

mbarton · 2021-09-22T18:59:28Z

.nvmrc

@@ -0,0 +1 @@
+14


.nvmrc files are handy for developers who use nvm to install multiple versions of node. You can just do nvm use before running any commands.

mbarton · 2021-09-22T19:00:09Z

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:12-alpine AS builder
+FROM node:14-alpine AS builder


Node 12 is LTS until May 2022 but we might as well upgrade

Actually ended up going to node 16, see comment below

Fab, does this line need updating to 16 then? Also, I think we mention npm version in readme - can you update the text/link there?

Yep have done in this commit. I think I forgot to push it last night 🤦

mbarton · 2021-09-22T19:00:31Z

frontend/package.json

-    "@fortawesome/free-regular-svg-icons": "^5.13.0",
-    "@fortawesome/free-solid-svg-icons": "^5.13.0",
-    "@fortawesome/react-fontawesome": "^0.1.9",
-    "@testing-library/jest-dom": "^4.2.4",


We've not got any tests :) we can put these back when we add some

mbarton · 2021-09-22T19:02:59Z

frontend/package.json

-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.5.0",
-    "@testing-library/user-event": "^7.2.1",
-    "babel-polyfill": "^6.26.0",


Hmm I need to revisit this one, I thought Create React App would include the polyfills based on the browserlist key but we might need to import it manually maybe (https://babeljs.io/docs/en/babel-polyfill.html).

We might not need polyfills at all, I wonder what the minimum Safari version is in use in the warehouse

Hmm so a quick look at https://caniuse.com/es6 and Safari has not needed a polyfill since v10, release in Sep 20 2016. So I think we're probably fine? If not Create React App has their own polyfill we can use which doesn't tie us to Babel (I can dream that one day CRA will drop it haha)

mbarton · 2021-09-22T19:03:34Z

frontend/package.json

-    "@testing-library/react": "^9.5.0",
-    "@testing-library/user-event": "^7.2.1",
-    "babel-polyfill": "^6.26.0",
-    "cross-fetch": "^3.0.4",


I'm pretty sure fetch is supported in all the browsers we target and we're not doing any server-side rendering which is the other use case for these libraries

mbarton · 2021-09-22T19:04:23Z

frontend/package.json

-    "babel-polyfill": "^6.26.0",
-    "cross-fetch": "^3.0.4",
-    "date-fns": "^2.13.0",
-    "node-sass": "^4.14.1",


This is deprecated in favour of sass, which as a bonus is pure javascript so no more horrible node-gyp build failures after upgrades.

mbarton · 2021-09-22T19:05:11Z

frontend/package.json

-    "cross-fetch": "^3.0.4",
-    "date-fns": "^2.13.0",
-    "node-sass": "^4.14.1",
-    "prop-types": "^15.7.2",


We only had PropTypes in one component and tbh I'd rather incrementally adopt Typescript than add more of them

mbarton · 2021-09-22T19:06:14Z

frontend/package.json

+    "redux-thunk": "2.3.0"
+  },
+  "devDependencies": {
+    "react-scripts": "4.0.3",


With our build deps as devDependencies we can run npm audit --production to get the actual number of affected vulnerabilities not thousands of nonsense Regex DoS CVEs that only affect our build tools. This is official advice from Create React App too (facebook/create-react-app#11174)

mbarton · 2021-09-22T19:06:30Z

frontend/package.json

-    "react-select": "^3.1.0",
-    "redux": "^4.0.5",
-    "redux-thunk": "^2.3.0",
-    "typescript": "^3.8.3"


No Typescript yet but we can add it back when we need it :)

mbarton · 2021-09-22T19:07:01Z

frontend/src/components/common/styles/paginator.scss

@@ -1,5 +1,6 @@
-@import 'include';
+@use 'sass:math';


This fixes a deprecation warning, the division syntax is going away in future versions of sass

mbarton · 2021-09-22T19:18:57Z

We still have some warnings in the build logs:

#16 84.16 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^2.1.3 (node_modules/react-scripts/node_modules/fsevents):
#16 84.16 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
#16 84.16 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules/watchpack-chokidar2/node_modules/chokidar/node_modules/fsevents):
#16 84.17 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
#16 84.17 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules/webpack-dev-server/node_modules/chokidar/node_modules/fsevents):
#16 84.17 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

These are legendary: npm/cli#169. It's expected behaviour because FSEvents is a MacOS-specific API so it quite rightly won't try to use it on Linux. The latest versions of node don't print this, in fact I've just noticed that version 16 will be promoted to LTS in 4 days time. So actually I think I'll upgrade to node 16 now rather than 14 and that will get rid of this warning.

#16 84.18 npm WARN @babel/[email protected] requires a peer of @babel/core@^7.13.0 but none is installed. You must install peer dependencies yourself.
#16 84.19 npm WARN [email protected] requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.

These two come from Create React App. The former should be fixed fairly quickly (facebook/create-react-app#11235), the latter is a long-standing issue that is difficult to solve without making Typescript usage harder (facebook/create-react-app#6834)

…bout fsevents

mbarton · 2021-09-22T19:39:44Z

Oh man, upgrading to node 16 removed those warnings but in come a whole bunch of deprecation ones instead!

#13 68.64 npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
#13 68.65 npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
#13 69.61 npm WARN deprecated @hapi/[email protected]: Moved to 'npm install @sideway/address'
#13 69.96 npm WARN deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-babel.
#13 71.28 npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
#13 73.23 npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
#13 73.39 npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
#13 74.36 npm WARN deprecated [email protected]: flatten is deprecated in favor of utility frameworks such as lodash.
#13 76.05 npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
#13 77.28 npm WARN deprecated @hapi/[email protected]: Switch to 'npm install joi'
#13 77.77 npm WARN deprecated [email protected]: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
#13 85.59 npm WARN deprecated [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
#13 88.53 npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
#13 88.65 npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
#13 88.66 npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
#13 90.45 npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
#13 95.85 npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
#13 101.6 npm WARN deprecated [email protected]: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
#13 108.7

They're all via Create React App and it seems their official policy is wait it out until their downstream dependencies upgrade: facebook/create-react-app#9431 (comment). I can totally understand but it really shows what a mess this ecosystem can be sometimes.

I think we'll just have to live with it. What do you reckon @adamcunnington?

mbarton · 2021-09-22T19:41:32Z

frontend/package.json

-    "redux": "^4.0.5",
-    "redux-thunk": "^2.3.0",
-    "typescript": "^3.8.3"
+    "@fortawesome/fontawesome-svg-core": "1.2.36",


I've pinned each version exactly. We've got a minimal set of direct dependencies but still better safe than investigating random errors because we pulled in a new version :)

Michael Barton added 2 commits September 22, 2021 19:23

Update node & libraries, removing unused ones. Fix sass deprecation w…

00c48ce

…arnings

mbarton self-assigned this Sep 22, 2021

mbarton commented Sep 22, 2021

View reviewed changes

Use node 16 as it will be LTS in four days and it doesn't log noise a…

5c06e11

…bout fsevents

mbarton commented Sep 22, 2021

View reviewed changes

mbarton requested a review from adamcunnington September 22, 2021 19:41

Mention Node version and nvm in README and

ed81978

adamcunnington approved these changes Sep 23, 2021

View reviewed changes

adamcunnington approved these changes Sep 27, 2021

View reviewed changes

adamcunnington merged commit a698548 into master Sep 30, 2021

adamcunnington deleted the mbarton/frontend-library-bumps branch September 30, 2021 21:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Frontend library bumps #95

Frontend library bumps #95

mbarton commented Sep 22, 2021

mbarton Sep 22, 2021

mbarton Sep 22, 2021

mbarton Sep 23, 2021

adamcunnington Sep 23, 2021

mbarton Sep 23, 2021

mbarton Sep 22, 2021

mbarton Sep 22, 2021

mbarton Sep 22, 2021

mbarton Sep 22, 2021

mbarton Sep 22, 2021

mbarton Sep 22, 2021 •

edited

Loading

mbarton Sep 22, 2021 •

edited

Loading

mbarton Sep 22, 2021

mbarton Sep 22, 2021

mbarton commented Sep 22, 2021

mbarton commented Sep 22, 2021

mbarton Sep 22, 2021

		@@ -1,4 +1,4 @@
		FROM node:12-alpine AS builder
		FROM node:14-alpine AS builder

Frontend library bumps #95

Frontend library bumps #95

Conversation

mbarton commented Sep 22, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mbarton Sep 22, 2021 • edited Loading

Choose a reason for hiding this comment

mbarton Sep 22, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mbarton commented Sep 22, 2021

mbarton commented Sep 22, 2021

Choose a reason for hiding this comment

mbarton Sep 22, 2021 •

edited

Loading

mbarton Sep 22, 2021 •

edited

Loading