Update vulnerable packages

.erb/configs/webpack.config.renderer.dev.babel.js

@@ -239,28 +239,30 @@ export default merge(baseConfig, {
     __dirname: false,
     __filename: false,
   },
-
+  infrastructureLogging: {
+    level: 'verbose'
+  },
   devServer: {
     port,
-    publicPath,
-    compress: true,
-    noInfo: false,
-    stats: 'errors-only',
-    inline: true,
-    lazy: false,
     hot: true,
     headers: { 'Access-Control-Allow-Origin': '*' },
-    contentBase: path.join(__dirname, 'dist'),
-    watchOptions: {
-      aggregateTimeout: 300,
-      ignored: /node_modules/,
-      poll: 100,
-    },
     historyApiFallback: {
       verbose: true,
       disableDotRule: false,
     },
-    before() {
+    devMiddleware: {
+      publicPath,
+      stats: 'errors-only',
+    },
+    static: {
+      directory: path.join(__dirname, 'dist'),
+      watch: {
+        aggregateTimeout: 300,
+        ignored: /node_modules/,
+        interval: 100,
+      },
+    },
+    onBeforeSetupMiddleware(devServer) {
       console.log('Starting Main Process...');
       spawn('npm', ['run', 'start:main'], {
         shell: true,

.github/workflows/publish-dev.yml

@@ -27,7 +27,7 @@ jobs:
       - name: Install Node, NPM and Yarn
         uses: actions/setup-node@v1
         with:
-          node-version: 15
+          node-version: '14.18.0'
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path

.github/workflows/publish-linux.yml

@@ -18,7 +18,7 @@ jobs:
       - name: Install Node, NPM and Yarn
         uses: actions/setup-node@v1
         with:
-          node-version: '14.16.1'
+          node-version: '14.18.0'
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path

.github/workflows/publish-macos.yml

@@ -18,7 +18,7 @@ jobs:
       - name: Install Node, NPM and Yarn
         uses: actions/setup-node@v1
         with:
-          node-version: '14.16.1'
+          node-version: '14.18.0'
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path

.github/workflows/publish-windows.yml

@@ -18,7 +18,7 @@ jobs:
       - name: Install Node, NPM
         uses: actions/setup-node@v1
         with:
-          node-version: '14.16.1'
+          node-version: '14.18.0'
 
       - name: Setup yarn
         run: npm install -g yarn

.github/workflows/test.yml

@@ -26,7 +26,7 @@ jobs:
       - name: Install Node.js, NPM and Yarn
         uses: actions/setup-node@v1
         with:
-          node-version: 15
+          node-version: '14.18.0'
 
       - name: yarn install
         run: |

README.md

@@ -118,7 +118,7 @@ To package apps for the local platform:
 yarn package
 ```
 
-If you receive errors while packaging the application, try upgrading/downgrading your Node version (tested on v14.16.1).
+If you receive errors while packaging the application, try upgrading/downgrading your Node version (tested on v14.18.0).
 
 If you are unable to run via debug in VS Code, check troubleshooting steps [here](https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues/2757#issuecomment-784200527).
 

babel.config.js

@@ -47,6 +47,8 @@ module.exports = (api) => {
       // Stage 3
       require('@babel/plugin-syntax-dynamic-import'),
       require('@babel/plugin-syntax-import-meta'),
+      [require('@babel/plugin-proposal-private-property-in-object'), { loose: true }],
+      [require('@babel/plugin-proposal-private-methods'), { loose: true }],
       [require('@babel/plugin-proposal-class-properties'), { loose: true }],
       require('@babel/plugin-proposal-json-strings'),
 

package.json

@@ -164,7 +164,7 @@
     "@babel/preset-react": "^7.12.7",
     "@babel/preset-typescript": "^7.12.7",
     "@babel/register": "^7.12.1",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
     "@teamsupercell/typings-for-css-modules-loader": "^2.4.0",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
@@ -174,16 +174,17 @@
     "@types/jest": "^26.0.15",
     "@types/lodash": "^4.14.172",
     "@types/md5": "^2.3.1",
-    "@types/node": "14.14.10",
+    "@types/node": "14.18.0",
     "@types/randomstring": "^1.1.7",
-    "@types/react": "^16.9.44",
+    "@types/react": "^17.0.2",
     "@types/react-chartjs-2": "^2.5.7",
     "@types/react-dnd": "^3.0.2",
-    "@types/react-dom": "^16.9.9",
+    "@types/react-dom": "^17.0.2",
     "@types/react-lazy-load-image-component": "^1.5.2",
     "@types/react-redux": "^7.1.18",
     "@types/react-router-dom": "^5.1.6",
-    "@types/react-test-renderer": "^16.9.3",
+    "@types/react-test-renderer": "^17.0.1",
+    "@types/react-transition-group": "^4.4.4",
     "@types/react-virtualized": "^9.21.13",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
@@ -203,9 +204,9 @@
     "core-js": "^3.6.5",
     "cross-env": "^7.0.2",
     "css-loader": "^5.0.1",
-    "css-minimizer-webpack-plugin": "^1.1.5",
+    "css-minimizer-webpack-plugin": "^3.4.1",
     "detect-port": "^1.3.0",
-    "electron": "13.6.3",
+    "electron": "13.6.6",
     "electron-builder": "^22.10.5",
     "electron-devtools-installer": "git+https://github.com/MarshallOfSound/electron-devtools-installer.git",
     "electron-notarize": "^1.0.0",
@@ -227,7 +228,6 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-react-hooks": "^4.0.8",
-    "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^6.0.0",
     "husky": "^4.2.5",
     "identity-obj-proxy": "^3.0.0",
@@ -236,7 +236,6 @@
     "less-loader": "7.3.0",
     "lint-staged": "^10.2.11",
     "mini-css-extract-plugin": "^2.1.0",
-    "node-sass": "^6.0.1",
     "opencollective-postinstall": "^2.0.3",
     "prettier": "^2.0.5",
     "react-refresh": "^0.10.0",
@@ -247,12 +246,12 @@
     "style-loader": "^2.0.0",
     "terser-webpack-plugin": "^5.0.3",
     "tsc-silent": "^1.2.1",
-    "typescript": "^4.0.5",
+    "typescript": "^4.0.5 < 4.6.0",
     "url-loader": "^4.1.0",
     "webpack": "^5.5.1",
     "webpack-bundle-analyzer": "^4.1.0",
     "webpack-cli": "^4.2.0",
-    "webpack-dev-server": "^3.11.0",
+    "webpack-dev-server": "^4.0.0",
     "webpack-merge": "^5.4.0",
     "yarn-deduplicate": "^3.1.0"
   },
@@ -273,7 +272,7 @@
     "format-duration": "^1.4.0",
     "history": "^5.0.0",
     "i18next": "^21.6.5",
-    "i18next-parser": "^5.4.0",
+    "i18next-parser": "^6.3.0",
     "image-downloader": "^4.0.3",
     "lodash": "^4.17.21",
     "md5": "^2.3.0",
@@ -282,7 +281,6 @@
     "nodejs-fs-utils": "^1.2.5",
     "randomstring": "^1.2.1",
     "react": "^17.0.2",
-    "react-animated-css": "^1.2.1",
     "react-audio-player": "^0.17.0",
     "react-chartjs-2": "^3.0.4",
     "react-dom": "^17.0.2",
@@ -298,14 +296,16 @@
     "react-window": "^1.8.6",
     "regenerator-runtime": "^0.13.5",
     "rsuite": "^4.10.2",
+    "sass": "^1.49.11",
     "source-map-support": "^0.5.19",
-    "styled-components": "^5.3.0"
+    "styled-components": "^5"
   },
   "resolutions": {
+    "glob-parent": "^5.1.2",
     "styled-components": "^5"
   },
   "devEngines": {
-    "node": ">=10.x",
+    "node": ">=12.13.0",
     "npm": ">=6.x",
     "yarn": ">=1.21.3"
   },

src/api/jellyfinApi.ts

@@ -629,12 +629,12 @@ export const getStarred = async (options: { musicFolderId?: string }) => {
   });
 
   return {
-    album: (
-      songAndAlbumData.Items.filter((data: any) => data.Type === 'MusicAlbum') || []
-    ).map((entry: any) => normalizeAlbum(entry)),
-    song: (
-      songAndAlbumData.Items.filter((data: any) => data.Type === 'Audio') || []
-    ).map((entry: any) => normalizeSong(entry)),
+    album: (songAndAlbumData.Items.filter((data: any) => data.Type === 'MusicAlbum') || []).map(
+      (entry: any) => normalizeAlbum(entry)
+    ),
+    song: (songAndAlbumData.Items.filter((data: any) => data.Type === 'Audio') || []).map(
+      (entry: any) => normalizeSong(entry)
+    ),
     artist: (artistData.Items || []).map((entry: any) => normalizeArtist(entry)),
   };
 };

src/components/debug/DebugWindow.tsx

@@ -35,29 +35,6 @@ const DebugWindow = ({ ...rest }) => {
     ],
   };
 
-  const fadeChartOptions = {
-    scales: {
-      yAxes: [
-        {
-          ticks: {
-            beginAtZero: true,
-          },
-        },
-      ],
-    },
-    plugins: {
-      title: {
-        display: true,
-        text: `${playQueue.player1.fadeData.volumeData.length} fades`,
-        position: 'bottom',
-      },
-      legend: {
-        display: false,
-      },
-    },
-    animation: false,
-  };
-
   return (
     <Panel
       style={{
@@ -187,7 +164,27 @@ const DebugWindow = ({ ...rest }) => {
           </FlexboxGrid.Item>
         </FlexboxGrid>
 
-        <Line data={fadeChartData} options={fadeChartOptions} />
+        <Line
+          data={fadeChartData}
+          options={{
+            scales: {
+              yAxes: {
+                min: 0,
+              },
+            },
+            plugins: {
+              title: {
+                display: true,
+                text: `${playQueue.player1.fadeData.volumeData.length} fades`,
+                position: 'bottom',
+              },
+              legend: {
+                display: false,
+              },
+            },
+            animation: false,
+          }}
+        />
 
         <Divider />
 

src/components/layout/GenericPage.tsx

@@ -13,10 +13,8 @@ const GenericPage = ({ header, children, hideDivider, ...rest }: any) => {
     if (misc.dynamicBackground) {
       const cachedImagePath = `${misc.imageCachePath}album_${playQueue.current?.albumId}.jpg`;
       const serverImagePath = playQueue.current?.image.replace(/size=\d+/, 'size=500');
-      const cssBackgroundImagePath = `${misc.imageCachePath}album_${playQueue.current?.albumId}.jpg`.replaceAll(
-        '\\',
-        '/'
-      );
+      const cssBackgroundImagePath =
+        `${misc.imageCachePath}album_${playQueue.current?.albumId}.jpg`.replaceAll('\\', '/');
 
       if (!isCached(cachedImagePath)) {
         const preloadImage = new Image();

src/components/library/AlbumList.tsx

@@ -81,7 +81,12 @@ const AlbumList = () => {
     }
   }, [config.serverType, musicFolder.id, view.album.filter, view.album.pagination]);
 
-  const { isLoading, isError, data: albums, error }: any = useQuery(
+  const {
+    isLoading,
+    isError,
+    data: albums,
+    error,
+  }: any = useQuery(
     currentQueryKey,
     () =>
       view.album.filter === 'random' ||
@@ -166,14 +171,8 @@ const AlbumList = () => {
     'year',
   ]);
 
-  const {
-    filteredData,
-    byArtistData,
-    byArtistBaseData,
-    byGenreData,
-    byStarredData,
-    byYearData,
-  } = useAdvancedFilter(albums?.data, view.album.advancedFilters);
+  const { filteredData, byArtistData, byArtistBaseData, byGenreData, byStarredData, byYearData } =
+    useAdvancedFilter(albums?.data, view.album.advancedFilters);
 
   const { sortColumns, sortedData } = useColumnSort(filteredData, Item.Album, view.album.sort);
 

src/components/library/ArtistList.tsx

@@ -40,7 +40,12 @@ const ArtistList = () => {
     }
   }, [folder]);
 
-  const { isLoading, isError, data: artists, error }: any = useQuery(
+  const {
+    isLoading,
+    isError,
+    data: artists,
+    error,
+  }: any = useQuery(
     ['artistList', musicFolder],
     () =>
       apiController({

src/components/library/FolderList.tsx

@@ -34,14 +34,17 @@ const FolderList = () => {
   const [musicFolder, setMusicFolder] = useState(folder.musicFolder);
   const folderPickerContainerRef = useRef(null);
 
-  const { isLoading, isError, data: indexData, error }: any = useQuery(
-    ['indexes', musicFolder],
-    () =>
-      apiController({
-        serverType: config.serverType,
-        endpoint: 'getIndexes',
-        args: config.serverType === Server.Subsonic ? { musicFolderId: musicFolder } : null,
-      })
+  const {
+    isLoading,
+    isError,
+    data: indexData,
+    error,
+  }: any = useQuery(['indexes', musicFolder], () =>
+    apiController({
+      serverType: config.serverType,
+      endpoint: 'getIndexes',
+      args: config.serverType === Server.Subsonic ? { musicFolderId: musicFolder } : null,
+    })
   );
 
   const { isLoading: isLoadingFolderData, data: folderData }: any = useQuery(

src/components/library/GenreList.tsx

@@ -22,7 +22,12 @@ const GenreList = () => {
   const config = useAppSelector((state) => state.config);
   const misc = useAppSelector((state) => state.misc);
   const folder = useAppSelector((state) => state.folder);
-  const { isLoading, isError, data: genres, error }: any = useQuery(['genrePageList'], async () => {
+  const {
+    isLoading,
+    isError,
+    data: genres,
+    error,
+  }: any = useQuery(['genrePageList'], async () => {
     const res = await apiController({
       serverType: config.serverType,
       endpoint: 'getGenres',