Task: Migrate from webpack v4 to webpack v5 (#1395)

* update plugins and loaders

* update react dev utils

* add FixFormatter plugin

* update fork-ts package

* fix json parsing errors

* add eslint-webpack-plugin

* update react-dev-utils

* update eslint config

* fix linting errors

* remove unsupported plugin

* remove caret

* update webpack config file

* update node-sass package

* update webpack-config

* downgarde node-sass and upgrade webpack-dev-server

* remove close function

* update webpack dev server settings

* update webpack config settings

* update build info path

* update vulnerable dependencies

* add babel/runtime dependency

* configure babel to use relative path

* update Workbox options

* update babel-preset-react-app

* adding babel-preset for webpack 5

* update babel packages and settings

* add new rule

* rename babel config file

* add runtime preset

* Update linter.yml

* Update azure-static-web-apps-jolly-sand-0ac78c710.yml

* increase cache size

* remove coverage path fix to invoke path error

* test coverage with unix environment

* refactor sonar analysis to a separate workflow

* refactor sonarcloud to workflows directory

* revert to the original linter workflow

* Update azure-static-web-apps-jolly-sand-0ac78c710.yml

* Update linter.yml

* update webpack config file

* update eslint packages

* update import

* update errors

* add localization

* update @typescript-eslint packages

* remove try...catch

* remove unused import

* remove unused string

* display error message

* remove plugin

* remove commented code

Co-authored-by: Evans Aboge <[email protected]>
Co-authored-by: Charles Wahome <[email protected]>

.eslintrc.js

@@ -2,23 +2,23 @@ module.exports = {
   env: {
     browser: true,
     es6: true,
-    node: true,
+    node: true
   },
   extends: [
     'eslint:recommended',
     'plugin:react/recommended',
-    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/eslint-recommended'
   ],
   globals: {
     Atomics: 'readonly',
-    SharedArrayBuffer: 'readonly',
+    SharedArrayBuffer: 'readonly'
   },
   parser: '@typescript-eslint/parser',
   parserOptions: {
     project: 'tsconfig.json',
     createDefaultProgram: true,
     ecmaVersion: 6,
-    sourceType: 'module',
+    sourceType: 'module'
   },
   plugins: ['react', '@typescript-eslint'],
   rules: {
@@ -30,8 +30,8 @@ module.exports = {
     '@typescript-eslint/explicit-member-accessibility': [
       'off',
       {
-        accessibility: 'explicit',
-      },
+        accessibility: 'explicit'
+      }
     ],
     '@typescript-eslint/indent': ['error', 2],
     '@typescript-eslint/interface-name-prefix': 'off',
@@ -40,13 +40,13 @@ module.exports = {
       {
         multiline: {
           delimiter: 'none',
-          requireLast: true,
+          requireLast: true
         },
         singleline: {
           delimiter: 'semi',
-          requireLast: false,
-        },
-      },
+          requireLast: false
+        }
+      }
     ],
     '@typescript-eslint/member-ordering': 'off',
     '@typescript-eslint/no-empty-function': 'error',
@@ -58,17 +58,17 @@ module.exports = {
     '@typescript-eslint/no-unused-expressions': [
       'error',
       {
-        allowShortCircuit: true,
-      },
+        allowShortCircuit: true
+      }
     ],
     '@typescript-eslint/no-unused-vars': [
       'warn',
       {
         args: 'after-used',
         argsIgnorePattern: '^_',
         ignoreRestSiblings: false,
-        vars: 'all',
-      },
+        vars: 'all'
+      }
     ],
     '@typescript-eslint/no-use-before-define': 'off',
     '@typescript-eslint/no-var-requires': 'off',
@@ -121,8 +121,8 @@ module.exports = {
     '@typescript-eslint/no-shadow': [
       'warn',
       {
-        hoist: 'all',
-      },
+        hoist: 'all'
+      }
     ],
     'no-throw-literal': 'error',
     'no-trailing-spaces': 'warn',
@@ -147,11 +147,11 @@ module.exports = {
     }],
     'spaced-comment': 'off',
     'use-isnan': 'error',
-    'valid-typeof': 'off',
+    'valid-typeof': 'off'
   },
   settings: {
     react: {
-      version: 'detect',
-    },
-  },
+      version: 'detect'
+    }
+  }
 };

babel.config.json

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "@babel/preset-env"
+  ]
+}

config/paths.js

@@ -81,7 +81,8 @@ module.exports = {
   proxySetup: resolveApp('src/setupProxy.js'),
   appNodeModules: resolveApp('node_modules'),
   publicUrl: getPublicUrl(resolveApp('package.json')),
-  servedPath: getServedPath(resolveApp('package.json'))
+  servedPath: getServedPath(resolveApp('package.json')),
+  appTsBuildInfoFile: resolveApp('node_modules/.cache/tsconfig.tsbuildinfo')
 };