Update vulnerable packages

[kgarner7]

The goal of this PR is to resolve as many of the package vulnerabilities as possible. As of writing, there is still a vulnerable packages, ajv, but that can't be upgraded easily (attempting to force a resolution makes yarn start fail). Sorry for just filing a PR

Specifically, the changes that were necessary:

• running yarn update a few times
• replacing node-sass (deprecated) with sass
• upgrading i18next-parser to v6
• replacing react-animated-css (no updates for two years, led to vulnerable packages) with react-transition-group. To support similar animation, there were a few changes to App.global.css (adapted from http://reactcommunity.org/react-transition-group/css-transition)
• updating Babel. Because of warnings output by Babel, this led to a few additional explicit requirements (private-methods, class-properties) that were explicitly declared loose
• upgrading webpack-dev-server from 3 to 4. Mostly followed documentation from https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md. This does mean the minimum node version is 12.13.0.
• force glob-parent >= 5.1.2

[kgarner7]

Ugh typescript is throwing a huge number of errors locally (things like Interface 'ElementClass' cannot simultaneously extend types 'Component<any, {}, any>' and 'Component<any, {}, any>'). I'm going to have to redo a large portion of this .-.

[jeffvli]

Where is it erroring? I'm running your branch locally without erroring.
Also you can ignore the build/test errors since those seem to be unrelated (just linting issues).

[kgarner7]

With node v14.18.3 (yarn 1.22.18) via nvm, the command yarn tsc-silent -p ./tsconfig.json --suppress 2702@/node_modules/react-chartjs-2/ 9006@/src/main.dev.js throws hundreds of errors

[jeffvli]

I don't think those errors are related to your changes. Seems to be a conflict error with yarn and @types/react and @types/react-dom from what I saw, and it doesn't break the app.

If you switch to main and try it you'll see the same errors. By the way, the transition doesn't seem to be working in the info view with the new CSSTransition.

[kgarner7]

...thanks for those tips! With the type annotations the same, (and a slightly newer version of node types), I can actually get tsc-silent to pass! I'll see what's going with the animations and other issues. Thanks for being so helpful

[kgarner7]

Ugh I was hoping that getting it to build (and have no typechecking errors) on Linux would let MacOS pass, but apparently not .-.
All of the other type errors should be addressed now, and animations should be working again

[kgarner7]

...there we go. It took locking typescript at < 4.6 to make @types/verror happy, but macos should be happy. Additionally, no more vulnerabilities!

[jeffvli]

Thanks for your work on this PR, looks good to me.

Though I'm wondering why the linting changed even though no changes were made to the .prettierrc printWidth value. Maybe a different calculation is used there in the upgraded webpack version?

[kgarner7]

I would blame at least a few of those changes to prettier being upgraded from 2.0.5 to 2.6.2. Either way, thanks for taking time to review this!

[jeffvli]

I just realized that the renderer is no longer hot reloading changes when running in dev mode: yarn start. Do you by chance know what may need to be changed to fix that?

[kgarner7]

The weird thing is that, hot reload appears to work for me? If I change a typescript file, it will update (although the entire app refreshes). I did notice a warning in the console that said react-refresh failed, which probably has to do with webpack 4.
Adding the following (replacing ReactRefreshWebpackPlugin) in webpack.config.renderer.dev.babel.js) at least gets rid of the warning...

    new ReactRefreshWebpackPlugin({
      overlay: {
        sockHost: "localhost"
      }
    }),

[jeffvli]

I'm seeing the webpack logs that the app is being recompiled when changes are made, but the changes don't seem to be reflecting on the app until I do a hard refresh (ctrl + R). Unfortunately adding the extra config doesn't change anything for me. I also don't see any warning that react-refresh failed, so not sure what's going on. I use Windows 10, so not sure if your testing environment is different from mine.

[webpack-cli] File 'C:\code\sonixd\src\components\player\NowPlayingView.tsx' was modified
    [webpack-cli] Changed time is Thu Oct 28 54241 21:31:35 GMT-0700 (Pacific Daylight Time) (timestamp is 1649539485095)
    [webpack-dev-middleware] Compilation starting...
    [webpack-cli] Compiler starting...
    [webpack-cli] Compiler is using config: 'C:\code\sonixd\.erb\configs\webpack.config.renderer.dev.babel.js'
    [webpack-cli] Compiler finished
    [webpack-dev-middleware] Compilation finished

Edit: Quite possible this is the issue? Seeing these errors in my console since the changes.

[kgarner7]

Ah, I haven't used WIndows to build. I'll test it on there and report what I can find. Weirdly enough, I can confirm that on Linux and MacOS, it does spawn a websocket on localhost:4343