Werner Digital

Technology

Major Updates

npm breaking changes

Contents
Resources

One of the best features of the npm system is the ability to easily see and coordinate major upgrades on dependent packages.

These upgrade notes are a little rough and mostly for my own use.

aws-amplify

amplify v4.3.x to v5.0.x

(ui v3.6.0 to v4.0.x)

  • no default Amplify import, change line in gatsby-browser.js

      • import Amplify from 'aws-amplify';
      • import { Amplify } from 'aws-amplify';
  • install (in this order, don't combine npm i)

    • npm i aws-amplify@5
    • npm i @aws-amplify/ui-react@4
    • rimraf node_modules
    • del package-lock.json
    • npm i

v1.2.26 to v3.5.1

This change required substantial code modification to the layout component. more info in the WD amplify-ui guide

This change required npm re-install:

  • rimraf node_modules
  • del package-lock.json
  • npm i

react18

upgrade guide 03/22 and the full react changelog

Updating react to v18 will force an upgrade to testing-library(13 and user event to 14), jest v28+, and gatsby v4+ use

npm uninstall @mui/styles gatsby-query-params
npm i use-query-params gatsby-plugin-use-query-params
  • the mui package @mui/styles does not support v18, this will bite when you run a decent version of npm or yarn with node18

  • using npm9 shows the issues with gatsby-query-params

  • useTransition hook - non-urgent updates with spinner

  • strict is mostly stricter

    • re-usable state
    • components can now render undefined
  • ts children sould now be specified explicity in interface,

    • children?: React.ReactNode;
  • batch re-render, disable with flushSync

installs

npm i react@18 react-dom@18 npm i --save-dev @types/react@18 @types/react-dom@18 @types/node@18 (optional) npm i --save-dev react-test-renderer@18 @types/react-test-renderer@18

react-hook-form7

mui5

typescript4