Frontend library bumps

[mbarton]

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

[mbarton]

.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]

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

[mbarton]

Actually ended up going to node 16, see comment below

[adamcunnington]

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?

[mbarton]

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

[mbarton]

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

[mbarton]

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

[mbarton]

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]

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]

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]

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

[mbarton]

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]

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

[mbarton]

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

[mbarton]

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 fsevents@2.3.2: 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 fsevents@1.2.13: 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 fsevents@1.2.13: 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/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.15.4 requires a peer of @babel/core@^7.13.0 but none is installed. You must install peer dependencies yourself.
#16 84.19 npm WARN tsutils@3.21.0 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)

[mbarton]

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/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
#13 68.65 npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
#13 69.61 npm WARN deprecated @hapi/address@2.1.4: Moved to 'npm install @sideway/address'
#13 69.96 npm WARN deprecated rollup-plugin-babel@4.4.0: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-babel.
#13 71.28 npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
#13 73.23 npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
#13 73.39 npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
#13 74.36 npm WARN deprecated flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
#13 76.05 npm WARN deprecated querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
#13 77.28 npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install joi'
#13 77.77 npm WARN deprecated sane@4.1.0: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
#13 85.59 npm WARN deprecated babel-eslint@10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
#13 88.53 npm WARN deprecated uuid@3.4.0: 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 uuid@3.4.0: 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 querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
#13 90.45 npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
#13 95.85 npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
#13 101.6 npm WARN deprecated core-js@2.6.12: 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]

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 :)