Allow building with modern NodeJS

.eslintrc.js

@@ -30,7 +30,7 @@ module.exports = {
       },
     },
   ],
-  parser: "babel-eslint",
+  parser: "@babel/eslint-parser",
   parserOptions: {
     ecmaFeatures: {
       jsx: true,

.github/workflows/npm-test.yml

@@ -14,9 +14,11 @@ jobs:
       - name: Prepare Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: '12.x'
-      - name: Run `npm install`
-        run: npm install
+          node-version: '20.x'
+      - name: Run `npm ci`
+        # See the PR below for why `--legacy-peer-deps`` is needed.
+        # https://github.com/netdata/dashboard/pull/467
+        run: npm ci --legacy-peer-deps
       - name: Run `npm test`
         run: npm test
   npm-lint:
@@ -28,8 +30,8 @@ jobs:
       - name: Prepare Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: '12.x'
-      - name: Run `npm install`
-        run: npm install
+          node-version: '20.x'
+      - name: Run `npm ci`
+        run: npm ci --legacy-peer-deps
       - name: Run `npm run lint`
         run: npm run lint

.github/workflows/release.yml

@@ -17,9 +17,11 @@ jobs:
       - name: 'Prepare Node.js'
         uses: actions/setup-node@v1
         with:
-          node-version: '12.x'
-      - name: 'Fetch Dependencies'
-        run: npm install
+          node-version: '20.x'
+      - name: Run `npm ci`
+        # See the PR below for why `--legacy-peer-deps`` is needed.
+        # https://github.com/netdata/dashboard/pull/467
+        run: npm ci --legacy-peer-deps
       - name: 'Build Dashboard'
         run: npm run build
       - name: 'Prepare Tarball'

craco.config.js

@@ -1,4 +1,5 @@
 const path = require("path")
+const console = require("console")
 
 // eslint-disable-next-line import/no-extraneous-dependencies
 const HtmlWebpackPlugin = require("html-webpack-plugin")
@@ -14,15 +15,19 @@ module.exports = {
   webpack: {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
     configure: (webpackConfig, { env, paths }) => {
-      const [parser, tsLoader, loadersObject, ...rules] = webpackConfig.module.rules
+      const [sourceMapLoaderOrFalse, loadersObject, ...rules] = webpackConfig.module.rules
+      console.assert(
+        sourceMapLoaderOrFalse == false || 
+          sourceMapLoaderOrFalse.loader === require.resolve('source-map-loader'),
+        "react-scripts' webpack config has changed, please update CRACO config.")
+
       const { oneOf } = loadersObject
       return {
         ...webpackConfig,
         module: {
           ...webpackConfig.module,
           rules: [
-            parser,
-            tsLoader,
+            sourceMapLoaderOrFalse,
             {
               oneOf: [
                 {