Testing Mirador using React 17

[phil-plencner-hl]

The recent commits to the master branch of Mirador include upgrades to React 17 (as part of this closed issue: #3601) .

There has not been a tagged release with these changes yet. However, in an effort to test out the functionality with Harvard's new Viewer which leverages Mirador 3 I have created an instance of the Harvard Viewer on Github Pages using Mirador 3 and React 17. You can see a set of example objects that use that instance here:
https://harvard-lts.github.io/mps-viewer/gh-pages/

The branch in our repository which includes this work is here:
https://github.com/harvard-lts/mps-viewer/tree/pre-pre-release

What were the steps I took to get to this state?

1. Uninstalled all the mirador plugins we are currently using
2. Uninstalled mirador using npm uninstall mirador
3. Upgraded react and react-dom to version 17 using npm install react@17.0.0 react-dom@17.0.0
4. Installed mirador on the master branch using the tarball url (See: https://www.pluralsight.com/guides/install-npm-packages-from-gitgithub) using npm install https://github.com/ProjectMirador/mirador/tarball/master
5. Comment out all our references to the uninstalled plugins in src/mirador.js: https://github.com/harvard-lts/mps-viewer/blob/pre-pre-release/src/mirador.js#L1C1-L9 and https://github.com/harvard-lts/mps-viewer/blob/pre-pre-release/src/mirador.js#L339-L347
6. Installed the babel-plugin-react-html-attr dev-dependency and added a .babelrc file (https://github.com/harvard-lts/mps-viewer/blob/pre-pre-release/.babelrc) to squash invalid DOM property warnings using npm install --save-dev babel-plugin-react-html-attr
7. When mirador is installed via the tarball it is not built. So I had to run npm install and npm run prepublishOnly under the /node_modules/mirador/ folder for Webpack to successfully build. I added it as a postinstall script to package.json. (See: https://stackoverflow.com/a/39307622): https://github.com/harvard-lts/mps-viewer/blob/pre-pre-release/package.json#L18
8. React 17 apparently has an issue that is fixed with React 18 that causes Webpack builds to fail because it cannot locate jsx-runtime. The temporary fix is to add aliases to webpack.config.js. I believe this can be removed when we upgrade to React 18. (Discovered here: Bug: Cannot import 'react/jsx-runtime' from esm node/webpack 5 facebook/react#20235 (comment)): https://github.com/harvard-lts/mps-viewer/blob/pre-pre-release/webpack/webpack.config.js#L33-L38

What needs to happen next?

1. An alpha/beta release needs to be created in mirador so we no longer need to build off of a tarball and build it manually in a postinstall script.
2. Our custom plugins need to be upgraded to React 17 and tag a specific release that is React 17 compatible. Reinstall those plugins in our Mirador instance.
3. Work with the Mirador community to upgrade other plugins to React 17 in the same manner.
4. Continue to work with the Mirador community on the future upgrades of the core project. Next on the list are upgrading Material UI to Version 5 (Upgrade to Material UI v5 #3598) and upgrading React to version 18 (Upgrade to React 18 #3602)

I encourage any thoughts, feedback or collaboration on this effort.

Thank you!