Fix react-placeholder peerDependency conflict (React v18)

[spwoodcock]

What type of PR is this? (check all applicable)

• 🍕 Feature
• 🐛 Bug Fix
• 📝 Documentation
• 🧑‍💻 Refactor
• ✅ Test
• 🤖 Build or CI
• ❓ Other (please specify)

Related Issue

• The react-placeholder frontend dependency is out of date and unmaintained.
• It has a peerDependency lock for React 16 || 17.
• Upgrading to React 18 has resulted in a conflict when installing frontend dependencies:

36.30 npm ERR! ERESOLVE unable to resolve dependency tree
36.30 npm ERR!
36.30 npm ERR! While resolving: [email protected]
36.30 npm ERR! Found: [email protected]
36.30 npm ERR! node_modules/react
36.30 npm ERR!   react@"^18.2.0" from the root project
36.30 npm ERR!
36.30 npm ERR! Could not resolve dependency:
36.30 npm ERR! peer react@"^16.8.0 || ^17" from [email protected]
36.30 npm ERR! node_modules/react-placeholder
36.30 npm ERR!   react-placeholder@"^4.1.0" from the root project

Describe this PR

• The code is actually compatible with React 18, but the repo maintainers have not updated the specified peerDependencies.
• This is a short term solution to use a forked repo with peerDependency as react v18.
• In the long term we should probably remove and replace the dependency entirely.

Review Guide

docker compose build tm-frontend

Checklist before requesting a review

• 📖 Read the Tasking Manager Contributing Guide: https://github.com/hotosm/tasking-manager/blob/develop/docs/developers/contributing.md
• 📖 Read the HOT Code of Conduct: https://docs.hotosm.org/code-of-conduct
• 👷‍♀️ Create small PRs. In most cases, this will be possible.
• ✅ Provide tests for your changes.
• 📝 Use descriptive commit messages.
• 📗 Update any related documentation and include any relevant screenshots.
• 🔠 Does this PR introduce or change any environment variables? If so, make sure to specify this change in the description.

Addtional considerations

Many outdated frontend packages:

npm warn deprecated [email protected]: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated [email protected]: Rimraf versions prior to v4 are no longer supported
npm warn deprecated @humanwhocodes/[email protected]: Use @eslint/config-array instead
npm warn deprecated [email protected]: Rimraf versions prior to v4 are no longer supported
npm warn deprecated @humanwhocodes/[email protected]: Use @eslint/object-schema instead
npm warn deprecated [email protected]: Glob versions prior to v9 are no longer supported
npm warn deprecated [email protected]: this package has been deprecated
npm warn deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
npm warn deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead
npm warn deprecated [email protected]: this package has been deprecated
npm warn deprecated [email protected]: It is not compatible with newer versions of GA starting with v4, as long as you are using GAv3 it should be ok, but the package is not longer being maintained
npm warn deprecated [email protected]: this package has been deprecated
npm warn deprecated [email protected]: this package has been deprecated
npm warn deprecated [email protected]: this package has been deprecated
npm warn deprecated [email protected]: this package has been deprecated
npm warn deprecated [email protected]: this package has been deprecated
npm warn deprecated [email protected]: this package has been deprecated
npm warn deprecated [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm warn deprecated [email protected]: You or someone you depend on is using Q, the JavaScript Promise library that gave JavaScript developers strong feelings about promises. They can almost certainly migrate to the native JavaScript promise now. Thank you literally everyone for joining me in this bet against the odds. Be excellent to each other.
npm warn deprecated
npm warn deprecated (For a CapTP with native promises, see @endo/eventual-send and @endo/captp)
npm warn deprecated [email protected]: this will be v4
npm warn deprecated [email protected]: Use your platform's native performance.now() and performance.timeOrigin.
npm warn deprecated [email protected]: Use your platform's native DOMException instead
npm warn deprecated [email protected]: Use your platform's native atob() and btoa() methods instead
npm warn deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead.
npm warn deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead.
npm warn deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
npm warn deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
npm warn deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
npm warn deprecated [email protected]: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm warn deprecated [email protected]: this package has been deprecated
npm warn deprecated @formatjs/[email protected]: the package is rather renamed to @formatjs/ecma-abstract with some changes in functionality (primarily selectUnit is removed and we don't plan to make any further changes to this package
npm warn deprecated [email protected]: this package has been renamed to babel-plugin-formatjs
npm warn deprecated [email protected]: We've written a new parser that's 6x faster and is backwards compatible. Please use @formatjs/icu-messageformat-parser
npm warn deprecated @ideditor/[email protected]: This module is now under the @rapideditor scope: install @rapideditor/location-conflation instead
npm warn deprecated @formatjs/[email protected]: We have renamed the package to @formatjs/intl-numberformat
npm warn deprecated @ideditor/[email protected]: This module is now under the @rapideditor scope: install @rapideditor/country-coder instead
npm warn deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.
npm warn deprecated [email protected]: this package has been deprecated
npm warn deprecated [email protected]: this package has been deprecated
npm warn deprecated [email protected]: this package has been deprecated
npm warn deprecated [email protected]: this package has been deprecated
npm warn deprecated [email protected]: this package has been deprecated
npm warn deprecated [email protected]: this package has been deprecated
npm warn deprecated [email protected]: this package has been deprecated
npm warn deprecated [email protected]: this package has been deprecated
npm warn deprecated [email protected]: this package has been deprecated
npm warn deprecated [email protected]: this package has been deprecated
npm warn deprecated [email protected]: this package has been deprecated
npm warn deprecated [email protected]: this package has been deprecated
npm warn deprecated [email protected]: this package has been deprecated
npm warn deprecated [email protected]: this package has been deprecated
npm warn deprecated [email protected]: this package has been deprecated
npm warn deprecated [email protected]: [email protected]
npm warn deprecated [email protected]: this package has been deprecated

[optional] What gif best describes this PR or how it makes you feel?

[sonarcloud]

Quality Gate failed

Failed conditions
1 Security Hotspot

See analysis details on SonarCloud

[dakotabenjamin]

Dunno why sonarcloud fails after the fix.