Merge pull request #2 from flatlogic/node_20_migration

Updated package.json, yarn.lock, components.

Author: TonyMockingbird

changelog.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [1.4.0] - 12/09/2024
+
+- Added react-scripts version 5 along with webpack version 5 support.
+- Added support for node.js version > 20
+- Updated dependencies.
+
 ## [1.3.0] 04/14/2021
 
 - Updated customization component

config-overrides.js

@@ -0,0 +1,31 @@
+const webpack = require("webpack")
+const path = require("path")
+module.exports = function override(config) {
+  const fallback = config.resolve.fallback || {}
+  Object.assign(fallback, {
+    crypto: require.resolve("crypto-browserify"),
+    stream: require.resolve("stream-browserify"),
+    assert: require.resolve("assert"),
+    http: require.resolve("stream-http"),
+    https: require.resolve("https-browserify"),
+    os: require.resolve("os-browserify"),
+    url: require.resolve("url"),
+    vm: require.resolve("vm-browserify"),
+  })
+  config.resolve.fallback = fallback
+  config.plugins = (config.plugins || []).concat([
+    new webpack.ProvidePlugin({
+      process: "process/browser",
+      Buffer: ["buffer", "Buffer"],
+    }),
+  ])
+  const modules = config.resolve.modules
+  config.resolve.modules = [...modules, path.resolve(__dirname, "src")]
+  config.module.rules.push({
+    test: /\.m?js/,
+    resolve: {
+      fullySpecified: false,
+    },
+  })
+  return config
+}

package.json

@@ -3,29 +3,35 @@
   "description": "User Management Template",
   "private": true,
   "dependencies": {
+    "assert": "^2.1.0",
     "awesome-bootstrap-checkbox": "1.0.1",
     "axios": "0.18.0",
     "bootstrap": "4.0.0",
+    "buffer": "^6.0.3",
     "chroma-js": "^2.1.0",
     "classnames": "^2.2.6",
     "connected-react-router": "6.3.1",
+    "crypto-browserify": "^3.12.0",
     "draft-js": "^0.10.5",
     "enzyme": "3.9.0",
     "enzyme-adapter-react-16": "1.10.0",
     "file-saver": "2.0.1",
     "filesize": "4.1.2",
     "formik": "1.5.1",
     "history": "4.7.2",
+    "https-browserify": "^1.0.0",
     "jsonwebtoken": "^8.5.1",
     "line-awesome": "github:icons8/line-awesome",
     "lodash": "4.17.11",
     "md5": "2.2.1",
     "moment": "^2.22.2",
-    "node-sass": "4.12.0",
+    "os-browserify": "^0.3.0",
+    "process": "^0.11.10",
     "rc-color-picker": "^1.2.6",
     "rc-hammerjs": "0.6.9",
     "react": "^16.8.3",
     "react-animate-height": "^2.0.16",
+    "react-app-rewired": "^2.2.1",
     "react-bootstrap": "^1.0.0-beta.16",
     "react-bootstrap-table": "4.1.5",
     "react-dev-utils": "^10.2.1",
@@ -34,7 +40,7 @@
     "react-router": "4.3.1",
     "react-router-dom": "4.3.1",
     "react-router-hash-link": "^1.2.1",
-    "react-scripts": "2.1.8",
+    "react-scripts": "^5.0.1",
     "react-scrollspy": "^3.3.5",
     "react-test-render": "1.1.1",
     "react-toastify": "^5.4.0",
@@ -44,14 +50,19 @@
     "redux": "4.0.1",
     "redux-devtools-extension": "2.13.8",
     "redux-thunk": "2.3.0",
+    "sass": "^1.69.5",
     "sass-loader": "7.1.0",
     "skycons": "^1.0.0",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
     "styled-components": "4.1.3",
+    "url": "^0.11.4",
+    "vm-browserify": "^1.1.2",
     "yup": "0.26.10"
   },
   "scripts": {
-    "build": "cross-env REACT_APP_ENVIRONMENT=production react-scripts build",
-    "start": "cross-env REACT_APP_ENVIRONMENT=development react-scripts start"
+    "build": "cross-env REACT_APP_ENVIRONMENT=production react-app-rewired --openssl-legacy-provider build",
+    "start": "cross-env REACT_APP_ENVIRONMENT=development react-app-rewired --openssl-legacy-provider start"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -62,6 +73,9 @@
     "not ie <= 11",
     "not op_mini all"
   ],
+  "engines": {
+    "node": "^20.15"
+  },
   "devDependencies": {
     "@babel/helper-call-delegate": "7.8.7",
     "@types/jest": "24.0.9",

src/components/Widget/Widget.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { UncontrolledTooltip } from 'reactstrap';
 import s from './Widget.module.scss';
 import classNames from 'classnames';
-import Loader from '../Loader'; // eslint-disable-line css-modules/no-unused-class
+import Loader from '../Loader';
 import AnimateHeight from 'react-animate-height';
 import uuidv4 from 'uuid/v4'
 import {

src/documentation/DocumentationHeader.js

@@ -13,7 +13,7 @@ import {
 
 import { openSidebar, closeSidebar, changeActiveSidebarItem } from '../actions/navigation';
 
-import s from '../components/Header/Header.module.scss'; // eslint-disable-line css-modules/no-unused-class
+import s from '../components/Header/Header.module.scss';
 import sd from './styles.module.scss';
 
 import twitterLogo from '../images/documentation/twitter-logo.svg';

src/styles/_utils.scss

@@ -439,7 +439,7 @@ $z-index-variants: (more: 1, less: -1, '10': 10, '-10': -10);
   .form-control:focus,
   .form-control:focus + .input-group-addon,
   &.focus .input-group-addon {
-    @extend .input-no-border:focus;
+    @extend .input-no-border, :focus;
   }
 }