chore: Replace eslint-loader with eslint-webpack-plugin and bump eslint

.eslintrc

@@ -2,8 +2,7 @@
   "parser": "babel-eslint",
   "extends": [
     "airbnb",
-    "prettier",
+    "prettier"
-    "prettier/react"
   ],
   "env": {
     "browser": true,

.github/workflows/publish.yml

@@ -5,23 +5,23 @@ on:
     tags: v*
 
 jobs:
-  build:
+  publish:
     environment: Publish
     runs-on: macos-10.15
 
     steps:
-    - run: echo $GH_TOKEN
+      - run: echo $GH_TOKEN
-    - uses: actions/checkout@v2
+      - uses: actions/checkout@v2
-    - name: Use Node.js 14.x
+      - name: Use Node.js 14.x
-      uses: actions/setup-node@v2
+        uses: actions/setup-node@v2
-      with:
+        with:
-        node-version: 14.x
+          node-version: 14.x
-        cache: 'yarn'
+          cache: 'yarn'
-    - name: Install
+      - name: Install
-      run: yarn install
+        run: yarn install
-    - name: Build
+      - name: Build
-      run: yarn build
+        run: yarn build
-    - name: Package and publish
+      - name: Package and publish
-      run: yarn dist:gh-publish
+        run: yarn dist:gh-publish
-      env:
+        env:
-        GH_TOKEN: ${{ secrets.GH_TOKEN }}
+          GH_TOKEN: ${{ secrets.GH_TOKEN }}

config/renderer.webpack.config.js

@@ -18,6 +18,7 @@ const getClientEnvironment = require('./env');
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
 const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
+const ESLintPlugin = require('eslint-webpack-plugin');
 
 // Source maps are resource heavy and can cause out of memory issue for large source files.
 const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
@@ -37,9 +38,7 @@ module.exports = function(webpackEnv) {
   // Webpack uses `publicPath` to determine where the app is being served from.
   // It requires a trailing slash, or the file assets will get an incorrect path.
   // In development, we always serve from the root. This makes config easier.
-  const publicPath = isEnvProduction
+  const publicPath = isEnvProduction ? paths.servedPath : isEnvDevelopment && '/';
-    ? paths.servedPath
-    : isEnvDevelopment && '/';
   // Some apps do not use client-side routing with pushState.
   // For these, "homepage" can be set to "." to enable relative asset paths.
   const shouldUseRelativeAssetPaths = publicPath === './';
@@ -47,12 +46,12 @@ module.exports = function(webpackEnv) {
   // `publicUrl` is just like `publicPath`, but we will provide it to our app
   // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
   // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
-  const publicUrl =  publicPath.slice(0, -1);
+  const publicUrl = publicPath.slice(0, -1);
   // Get environment variables to inject into our app.
   const env = getClientEnvironment(publicUrl);
 
   return {
-    target: "electron-renderer",
+    target: 'electron-renderer',
     mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
     // Stop compilation early in production
     bail: isEnvProduction,
@@ -63,26 +62,28 @@ module.exports = function(webpackEnv) {
       : isEnvDevelopment && 'cheap-module-source-map',
     // These are the "entry points" to our application.
     // This means they will be the "root" imports that are included in JS bundle.
-    entry: isEnvDevelopment ? [
+    entry: isEnvDevelopment
-      // Include an alternative client for WebpackDevServer. A client's job is to
+      ? [
-      // connect to WebpackDevServer by a socket and get notified about changes.
+          // Include an alternative client for WebpackDevServer. A client's job is to
-      // When you save a file, the client will either apply hot updates (in case
+          // connect to WebpackDevServer by a socket and get notified about changes.
-      // of CSS changes), or refresh the page (in case of JS changes). When you
+          // When you save a file, the client will either apply hot updates (in case
-      // make a syntax error, this client will display a syntax error overlay.
+          // of CSS changes), or refresh the page (in case of JS changes). When you
-      // Note: instead of the default WebpackDevServer client, we use a custom one
+          // make a syntax error, this client will display a syntax error overlay.
-      // to bring better experience for Create React App users. You can replace
+          // Note: instead of the default WebpackDevServer client, we use a custom one
-      // the line below with these two lines if you prefer the stock client:
+          // to bring better experience for Create React App users. You can replace
-      // require.resolve('webpack-dev-server/client') + '?/',
+          // the line below with these two lines if you prefer the stock client:
-      // require.resolve('webpack/hot/dev-server'),
+          // require.resolve('webpack-dev-server/client') + '?/',
-      require.resolve('react-dev-utils/webpackHotDevClient'),
+          // require.resolve('webpack/hot/dev-server'),
-      // Finally, this is your app's code: Renderer code
+          require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appIndexJs,
+          // Finally, this is your app's code: Renderer code
-      // We include the app code last so that if there is a runtime error during
+          paths.appIndexJs,
-      // initialization, it doesn't blow up the WebpackDevServer client, and
+          // We include the app code last so that if there is a runtime error during
-      // changing JS code would still trigger a refresh.
+          // initialization, it doesn't blow up the WebpackDevServer client, and
-    ] : {
+          // changing JS code would still trigger a refresh.
-      path: paths.appIndexJs,
+        ]
-    },
+      : {
+          path: paths.appIndexJs,
+        },
     output: {
       // The build folder.
       path: isEnvProduction ? paths.appBuild : undefined,
@@ -90,26 +91,18 @@ module.exports = function(webpackEnv) {
       pathinfo: isEnvDevelopment,
       // There will be one main bundle, and one file per asynchronous chunk.
       // In development, it does not produce real files.
-      filename: isEnvProduction
+      filename: isEnvProduction ? 'static/js/[name].[contenthash:8].js' : isEnvDevelopment && 'static/js/bundle.js',
-        ? 'static/js/[name].[contenthash:8].js'
-        : isEnvDevelopment && 'static/js/bundle.js',
       // TODO: remove this when upgrading to webpack 5
       futureEmitAssets: true,
       // There are also additional JS chunk files if you use code splitting.
-      chunkFilename: isEnvProduction
+      chunkFilename: isEnvProduction ? 'static/js/[name].chunk.js' : isEnvDevelopment && 'static/js/[name].chunk.js',
-        ? 'static/js/[name].chunk.js'
-        : isEnvDevelopment && 'static/js/[name].chunk.js',
       // We inferred the "public path" (such as / or /my-project) from homepage.
       // We use "/" in development.
       publicPath: publicPath,
       // Point sourcemap entries to original disk location (format as URL on Windows)
       devtoolModuleFilenameTemplate: isEnvProduction
-        ? info =>
+        ? info => path.relative(paths.appSrc, info.absoluteResourcePath).replace(/\\/g, '/')
-            path
+        : isEnvDevelopment && (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
-              .relative(paths.appSrc, info.absoluteResourcePath)
-              .replace(/\\/g, '/')
-        : isEnvDevelopment &&
-          (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
     },
     optimization: {
       minimize: isEnvProduction,
@@ -176,18 +169,14 @@ module.exports = function(webpackEnv) {
       // We placed these paths second because we want `node_modules` to "win"
       // if there are any conflicts. This matches Node resolution mechanism.
       // https://github.com/facebook/create-react-app/issues/253
-      modules: ['node_modules', paths.appNodeModules].concat(
+      modules: ['node_modules', paths.appNodeModules].concat(modules.additionalModulePaths || []),
-        modules.additionalModulePaths || []
-      ),
       // These are the reasonable defaults supported by the Node ecosystem.
       // We also include JSX as a common component filename extension to support
       // some tools, although we do not recommend using it, see:
       // https://github.com/facebook/create-react-app/issues/290
       // `web` extension prefixes have been added for better support
       // for React Native Web.
-      extensions: paths.moduleFileExtensions
+      extensions: paths.moduleFileExtensions.map(ext => `.${ext}`).filter(ext => useTypeScript || !ext.includes('ts')),
-        .map(ext => `.${ext}`)
-        .filter(ext => useTypeScript || !ext.includes('ts')),
       alias: {
         // Support React Native Web
         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
@@ -217,24 +206,6 @@ module.exports = function(webpackEnv) {
       rules: [
         // Disable require.ensure as it's not a standard language feature.
         { parser: { requireEnsure: false } },
-
-        // First, run the linter.
-        // It's important to do this before Babel processes the JS.
-        {
-          test: /\.(js|mjs|jsx|ts|tsx)$/,
-          enforce: 'pre',
-          use: [
-            {
-              options: {
-                formatter: require.resolve('react-dev-utils/eslintFormatter'),
-                eslintPath: require.resolve('eslint'),
-                emitWarning: true,
-              },
-              loader: require.resolve('eslint-loader'),
-            },
-          ],
-          include: paths.appSrc,
-        },
         {
           // "oneOf" will traverse all following loaders until one will
           // match the requirements. When no loader matches it will fall
@@ -258,10 +229,8 @@ module.exports = function(webpackEnv) {
               include: paths.appSrc,
               loader: require.resolve('babel-loader'),
               options: {
-                customize: require.resolve(
+                customize: require.resolve('babel-preset-react-app/webpack-overrides'),
-                  'babel-preset-react-app/webpack-overrides'
+
-                ),
-                
                 plugins: [
                   [
                     require.resolve('babel-plugin-named-asset-import'),
@@ -305,6 +274,16 @@ module.exports = function(webpackEnv) {
       ],
     },
     plugins: [
+      new ESLintPlugin({
+        formatter: require.resolve('react-dev-utils/eslintFormatter'),
+        eslintPath: require.resolve('eslint'),
+        emitWarning: true,
+        // TODO: On day when all linter error are fix we will be able to activate this
+        failOnError: false,
+        failOnWarning: false,
+        emitError: false,
+        emitWarning: false,
+      }),
       // Generates an `index.html` file with the <script> injected.
       new HtmlWebpackPlugin(
         Object.assign(
@@ -328,14 +307,12 @@ module.exports = function(webpackEnv) {
                   minifyURLs: true,
                 },
               }
-            : undefined
+            : undefined,
-        )
+        ),
       ),
       // Inlines the webpack runtime script. This script is too small to warrant
       // a network request.
-      isEnvProduction &&
+      isEnvProduction && shouldInlineRuntimeChunk && new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
-        shouldInlineRuntimeChunk &&
-        new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
       // Makes some environment variables available in index.html.
       // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
       // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
@@ -362,8 +339,7 @@ module.exports = function(webpackEnv) {
       // to restart the development server for Webpack to discover it. This plugin
       // makes the discovery automatic so you don't have to restart.
       // See https://github.com/facebook/create-react-app/issues/186
-      isEnvDevelopment &&
+      isEnvDevelopment && new WatchMissingNodeModulesPlugin(paths.appNodeModules),
-        new WatchMissingNodeModulesPlugin(paths.appNodeModules),
       // Moment.js is an extremely popular library that bundles large locale files
       // by default due to how Webpack interprets its code. This is a practical
       // solution that requires the user to opt into importing specific locales.
@@ -379,12 +355,8 @@ module.exports = function(webpackEnv) {
           async: isEnvDevelopment,
           useTypescriptIncrementalApi: true,
           checkSyntacticErrors: true,
-          resolveModuleNameModule: process.versions.pnp
+          resolveModuleNameModule: process.versions.pnp ? `${__dirname}/pnpTs.js` : undefined,
-            ? `${__dirname}/pnpTs.js`
+          resolveTypeReferenceDirectiveModule: process.versions.pnp ? `${__dirname}/pnpTs.js` : undefined,
-            : undefined,
-          resolveTypeReferenceDirectiveModule: process.versions.pnp
-            ? `${__dirname}/pnpTs.js`
-            : undefined,
           tsconfig: paths.appTsConfig,
           reportFiles: [
             '**',

package.json

@@ -150,16 +150,15 @@
     "electron": "^13.1.0",
     "electron-builder": "^22.9.1",
     "electron-devtools-installer": "^3.1.1",
-    "eslint": "^6.8.0",
+    "eslint": "^7.30.0",
     "eslint-config-airbnb": "^18.2.0",
-    "eslint-config-prettier": "^6.11.0",
+    "eslint-config-prettier": "^8.3.0",
-    "eslint-config-react-app": "^4.0.1",
+    "eslint-config-react-app": "^6.0.0",
-    "eslint-loader": "2.1.2",
-    "eslint-plugin-flowtype": "2.50.3",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.22.0",
-    "eslint-plugin-react-hooks": "^1.7.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-webpack-plugin": "^2.5.4",
     "file-loader": "3.0.1",
     "html-webpack-plugin": "4.0.0-beta.5",
     "identity-obj-proxy": "3.0.0",