Fix peer dependency issues during npm install (#65)

closes https://github.com/bellingcat/ukraine-timemap/issues/56
2026-06-08 03:18:36 +03:00 · 2023-01-16 21:00:14 +01:00
parent 7502d1de2e
commit 07dccef520
12 changed files with 14553 additions and 7359 deletions
--- a/README.md
+++ b/README.md
@@ -44,7 +44,7 @@ Please check our [issues page](https://github.com/bellingcat/ukraine-timemap/iss
 * `store.ui.colors` and `store.ui.maxNumOfColors` are applied to filters, as they are selected

 Easiest way to deploy the static files is through 
-* `nvm use 14`
+* `nvm use 16`
 * `npm run build` (rather: `CI=false npm run build`)
 * copy the files to your server, for example to `/var/www/html`

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -4,6 +4,9 @@
  "description": "",
  "homepage": ".",
  "private": true,
+  "engines": {
+    "node": "16"
+  },
  "scripts": {
    "dev": "node scripts/start.js",
    "build": "NODE_ENV=production node scripts/build.js",
@@ -15,52 +18,72 @@
    "lint:fix": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\""
  },
  "dependencies": {
-    "@babel/core": "7.12.3",
+    "d3": "^7.4.2",
+    "dayjs": "^1.11.0",
+    "joi": "^14.0.1",
+    "json2csv": "^5.0.7",
+    "leaflet": "^1.0.3",
+    "marked": "^0.7.0",
+    "object-hash": "^1.3.0",
+    "ramda": "^0.26.1",
+    "react-dev-utils": "^11.0.1",
+    "react-device-detect": "^2.2.2",
+    "react-dom": "^18.0.0",
+    "react-image": "^4.0.3",
+    "react-redux": "^8.0.5",
+    "react-refresh": "^0.8.3",
+    "react-tabs": "^6.0.0",
+    "react-twitter-embed": "^4.0.4",
+    "react": "^18.0.0",
+    "redux-thunk": "^2.2.0",
+    "redux": "^4.0.0",
+    "reselect": "^3.0.1",
+    "screenfull": "^5.2.0",
+    "supercluster": "^7.1.5",
+    "video-react": "^0.16.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.12",
+    "@babel/highlight": "^7.14.5",
    "@pmmmwh/react-refresh-webpack-plugin": "0.4.2",
    "@svgr/webpack": "5.4.0",
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
-    "@typescript-eslint/eslint-plugin": "^4.5.0",
-    "@typescript-eslint/parser": "^4.5.0",
+    "ava": "1.0.0-beta.8",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.6.0",
-    "babel-loader": "8.1.0",
+    "babel-loader": "^8.2.4",
    "babel-plugin-named-asset-import": "^0.3.7",
    "babel-preset-react-app": "^10.0.0",
    "bfj": "^7.0.2",
    "camelcase": "^6.1.0",
    "case-sensitive-paths-webpack-plugin": "2.3.0",
    "css-loader": "4.3.0",
-    "d3": "^7.4.2",
-    "dayjs": "^1.11.0",
-    "dotenv": "8.2.0",
    "dotenv-expand": "5.1.0",
-    "eslint": "^7.11.0",
+    "dotenv": "8.2.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-flowtype": "^5.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jest": "^24.1.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-testing-library": "^3.9.2",
    "eslint-webpack-plugin": "^2.1.0",
+    "eslint": "^7.11.0",
    "file-loader": "6.1.1",
    "fs-extra": "^9.0.1",
    "html-webpack-plugin": "4.5.0",
    "husky": "^4.3.5",
    "identity-obj-proxy": "3.0.0",
-    "jest": "26.6.0",
    "jest-circus": "26.6.0",
+    "jest-date-mock": "^1.0.8",
    "jest-resolve": "26.6.0",
    "jest-watch-typeahead": "0.6.1",
-    "joi": "^14.0.1",
-    "json2csv": "^5.0.7",
-    "leaflet": "^1.0.3",
+    "jest": "26.6.0",
    "lint-staged": "^10.5.3",
-    "marked": "^0.7.0",
    "mini-css-extract-plugin": "0.11.3",
-    "object-hash": "^1.3.0",
+    "node-sass": "^8.0.0",
    "optimize-css-assets-webpack-plugin": "5.0.4",
    "pnp-webpack-plugin": "1.6.4",
    "postcss-flexbugs-fixes": "4.2.1",
@@ -69,46 +92,20 @@
    "postcss-preset-env": "6.7.0",
    "postcss-safe-parser": "5.0.2",
    "prettier": "^2.2.1",
-    "prompts": "2.4.0",
-    "ramda": "^0.26.1",
-    "react": "^18.0.0",
    "react-app-polyfill": "^2.0.0",
-    "react-dev-utils": "^11.0.1",
-    "react-device-detect": "^1.6.2",
-    "react-dom": "^18.0.0",
-    "react-image": "^1.5.1",
-    "react-portal": "^4.2.0",
-    "react-redux": "^5.0.4",
-    "react-refresh": "^0.8.3",
-    "react-tabs": "3.0.0",
-    "react-twitter-embed": "^4.0.4",
-    "redux": "^4.0.0",
-    "redux-thunk": "^2.2.0",
-    "reselect": "^3.0.1",
-    "resolve": "1.18.1",
    "resolve-url-loader": "^3.1.2",
-    "sass-loader": "10.2.1",
-    "screenfull": "^5.2.0",
+    "resolve": "1.18.1",
+    "sass-loader": "^10.4.1",
    "semver": "7.3.2",
    "style-loader": "1.3.0",
-    "supercluster": "^7.1.5",
    "terser-webpack-plugin": "4.2.3",
    "ts-pnp": "1.2.0",
    "url-loader": "4.1.1",
-    "video-react": "^0.13.1",
-    "webpack": "4.44.2",
-    "webpack-dev-server": "3.11.0",
+    "webpack-dev-server": "^3.11.3",
    "webpack-manifest-plugin": "2.2.0",
+    "webpack": "^4.46.0",
    "workbox-webpack-plugin": "5.1.4"
  },
-  "devDependencies": {
-    "@babel/highlight": "^7.14.5",
-    "ava": "1.0.0-beta.8",
-    "jest-date-mock": "^1.0.8",
-    "mocha": "^5.2.0",
-    "node-sass": "^6.0",
-    "redux-devtools": "^3.4.0"
-  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --write"
--- a/src/components/Portal.js
+++ b/src/components/Portal.js
@@ -0,0 +1,12 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+class Portal extends React.Component {
+  render() {
+    const { children, node } = this.props;
+    if (!node) return null;
+    return ReactDOM.createPortal(children, node);
+  }
+}
+
+export default Portal;
--- a/src/components/atoms/Content.js
+++ b/src/components/atoms/Content.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { Player } from "video-react";
-import Img from "react-image";
+import { Img } from "react-image";
 import Md from "./Md";
 import Spinner from "../atoms/Spinner";
 import NoSource from "../atoms/NoSource";
--- a/src/components/controls/DownloadButton.js
+++ b/src/components/controls/DownloadButton.js
@@ -6,8 +6,7 @@ import { downloadAsFile } from "../../common/utilities";

 export class DownloadButton extends React.Component {
  onDownload(format, domain) {
-    console.log()
-    let filename = `ukr-civharm-${dayjs().format('YYYY-MM-DD')}`;
+    let filename = `ukr-civharm-${dayjs().format("YYYY-MM-DD")}`;
    if (format === "csv") {
      let outputData = this.getCsvData(domain);
      downloadAsFile(`${filename}.csv`, outputData);
--- a/src/components/space/carto/Map.js
+++ b/src/components/space/carto/Map.js
@@ -3,7 +3,6 @@ import { bindActionCreators } from "redux";
 import "leaflet";
 import React from "react";
 import { flushSync } from "react-dom";
-import { Portal } from "react-portal";
 import Supercluster from "supercluster";
 import { isMobileOnly } from "react-device-detect";

@@ -16,6 +15,7 @@ import Regions from "./atoms/Regions";
 import Events from "./atoms/Events";
 import Clusters from "./atoms/Clusters";
 import SelectedEvents from "./atoms/SelectedEvents";
+import Portal from "../../Portal";
 import Narratives from "./atoms/Narratives";
 import DefsMarkers from "./atoms/DefsMarkers";
 import SatelliteOverlayToggle from "./atoms/SatelliteOverlayToggle";
--- a/src/components/space/carto/atoms/Clusters.js
+++ b/src/components/space/carto/atoms/Clusters.js
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
-import { Portal } from "react-portal";
 import colors from "../../../../common/global";
 import ColoredMarkers from "../../../atoms/ColoredMarkers";
+import Portal from "../../../Portal";
 import {
  calcClusterOpacity,
  calcClusterSize,
--- a/src/components/space/carto/atoms/Events.js
+++ b/src/components/space/carto/atoms/Events.js
@@ -1,7 +1,7 @@
 import React from "react";
-import { Portal } from "react-portal";
 import colors from "../../../../common/global";
 import ColoredMarkers from "../../../atoms/ColoredMarkers";
+import Portal from "../../../Portal";
 import hash from "object-hash";
 import {
  calcOpacity,
--- a/src/components/space/carto/atoms/Narratives.js
+++ b/src/components/space/carto/atoms/Narratives.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { Portal } from "react-portal";
+import Portal from "../../../Portal";
 // import { concatStatic } from 'rxjs/operator/concat'
 // import { single } from 'rxjs/operator/single'

--- a/src/components/space/carto/atoms/Regions.js
+++ b/src/components/space/carto/atoms/Regions.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { Portal } from "react-portal";
+import Portal from "../../../Portal";

 function MapRegions({ svg, regions, projectPoint, styles }) {
  function renderRegion(region) {
--- a/src/components/space/carto/atoms/SelectedEvents.js
+++ b/src/components/space/carto/atoms/SelectedEvents.js
@@ -1,7 +1,7 @@
 import React from "react";
-import { Portal } from "react-portal";
 import colors from "../../../../common/global";
 import hash from "object-hash";
+import Portal from "../../../Portal";

 class MapSelectedEvents extends React.Component {
  renderMarker(marker) {