⬆️ upgrade to major versions of dependencies

.eslintrc

@@ -7,6 +7,7 @@
   },
   "parser": "babel-eslint",
   "rules": {
+    "arrow-body-style": 0,
     "import/prefer-default-export": 0,
     "import/no-unresolved": 0,
     "jsx-a11y/click-events-have-key-events": 0,

package.json

@@ -8,8 +8,8 @@
     "url": "https://github.com/igolopolosov/igor"
   },
   "scripts": {
-    "start": "webpack-dev-server",
-    "build": "webpack --colors --config webpack.config.production.js",
+    "start": "webpack serve",
+    "build": "webpack --config webpack.config.production.js",
     "release": "sh release.sh",
     "test": "jest -c jest.config.json",
     "lint": "eslint . --ext .js,.jsx"
@@ -19,8 +19,8 @@
     "@babel/runtime-corejs2": "7.12.13",
     "date-fns": "2.17.0",
     "prop-types": "15.7.2",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
     "react-redux": "7.2.2",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
@@ -49,35 +49,35 @@
     "@babel/preset-env": "7.12.16",
     "@babel/preset-react": "7.12.13",
     "@types/jest": "26.0.20",
-    "@types/node": "13.13.41",
-    "@types/react": "16.14.4",
+    "@types/node": "14.14.27",
+    "@types/react": "17.0.2",
     "@types/react-redux": "7.1.16",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.1.0",
-    "babel-jest": "25.5.1",
+    "babel-jest": "26.6.3",
     "babel-loader": "8.2.2",
-    "css-loader": "3.6.0",
-    "eslint": "6.8.0",
+    "css-loader": "5.0.2",
+    "eslint": "7.20.0",
     "eslint-config-airbnb": "18.2.1",
-    "eslint-config-prettier": "6.15.0",
+    "eslint-config-prettier": "7.2.0",
     "eslint-plugin-import": "2.22.1",
     "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-prettier": "3.3.1",
     "eslint-plugin-react": "7.22.0",
     "file-loader": "6.2.0",
-    "html-webpack-plugin": "3.2.0",
+    "html-webpack-plugin": "5.1.0",
     "jest-cli": "26.6.3",
-    "less": "3.13.1",
-    "less-loader": "5.0.0",
-    "mini-css-extract-plugin": "0.12.0",
+    "less": "4.1.1",
+    "less-loader": "8.0.0",
+    "mini-css-extract-plugin": "1.3.6",
     "prettier": "2.2.1",
-    "prettier-eslint": "9.0.2",
-    "style-loader": "1.3.0",
+    "prettier-eslint": "12.0.0",
+    "style-loader": "2.0.0",
     "ts-jest": "26.5.1",
-    "ts-loader": "6.2.2",
-    "typescript": "3.9.9",
-    "webpack": "4.46.0",
-    "webpack-cli": "3.3.12",
+    "ts-loader": "8.0.17",
+    "typescript": "4.1.5",
+    "webpack": "5.21.2",
+    "webpack-cli": "4.5.0",
     "webpack-dev-server": "^3.11.2"
   }
 }

scripts/components/Main.tsx

@@ -4,8 +4,7 @@ import { Routes } from "./Routes";
 import { ThemeToggle } from "./blocks/ThemeToggle";
 import { Footer } from "./Footer";
 import { Header } from "./Header";
-
-const styles = require("./Main.less");
+import styles from "./Main.less";
 
 interface MainState {
   isFullScreen: boolean;

scripts/components/blocks/Pager.js

@@ -72,7 +72,7 @@ class PagerContainer extends React.PureComponent {
 PagerContainer.propTypes = {
   pathName: PropTypes.string.isRequired,
   items: PropTypes.arrayOf(PropTypes.any).isRequired,
-  renderItem: PropTypes.func.isRequired,
+  renderItem: PropTypes.func,
   history: PropTypes.object.isRequired,
   location: PropTypes.object.isRequired
 };

scripts/components/blocks/Tabs.tsx

@@ -3,7 +3,7 @@ import { ReactElement } from "react";
 import { NavLink } from "react-router-dom";
 
 import { PaneProps } from "./Pane";
-const styles = require("./Tabs.less");
+import styles from "./Tabs.less";
 
 namespace TabsNS {
   export interface Props {

scripts/components/pages/blog/Blog.tsx

@@ -10,7 +10,7 @@ import { ALink } from '../../blocks/Link';
 import { NAVIGATION_LINKS } from "../../../consts/navigation";
 import { loadBlog } from "./loadBlog";
 
-const styles = require("./Blog.less");
+import styles from "./Blog.less";
 
 namespace BlogContainerNS {
   interface OwnProps {

scripts/components/pages/playground/CircleCanon.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { fireCircles } from "./circleCanon/fireCircles";
 import { getRandomNumberInRangeRounded } from "./circleCanon/utils/getRandomNumberInRange";
-const styles = require("./circleCanon.less");
+import styles from "./circleCanon.less";
 
 export class CircleCanon extends React.PureComponent<{}, {}> {
   private panelRef: React.RefObject<any>;

scripts/components/pages/playground/Playground.tsx

@@ -10,7 +10,7 @@ import { PredictionBook } from "./PredictionBook";
 import { CircleCanon } from "./CircleCanon";
 import { WordReminder } from "./WordReminder";
 
-const styles = require("./Playground.less");
+import styles from "./Playground.less";
 
 const {
   circleCanon,

scripts/components/pages/playground/PredictionBook.tsx

@@ -7,7 +7,7 @@ import { setLines, setPages } from "../../../reducers/prediction";
 import { Button } from "../../blocks/Button";
 import { NumberInput } from "../../blocks/NumberInput";
 
-const styles = require("./PredictionBook.less");
+import styles from "./PredictionBook.less";
 
 namespace PredictionBookNS {
   export interface OwnProps {}

scripts/components/pages/playground/WordReminder.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Button } from "../../blocks/Button";
-const styles = require("./WordReminder.less");
+import styles from "./WordReminder.less";
 
 interface WordReminderState {
   newWord: string;

scripts/externals.d.ts

@@ -0,0 +1,4 @@
+declare module '*.less' {
+  const resource: {[key: string]: string};
+  export = resource;
+}

tsconfig.json

@@ -33,6 +33,9 @@
       "dom"
     ]
   },
+  "includes": [
+    "./scripts/externals.d.ts"
+  ],
   "exclude": [
     "node_modules"
   ]

webpack.config.js

@@ -3,62 +3,74 @@ const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
-	mode: 'development',
-	entry: [
-      '@babel/polyfill',
-      './scripts/index'
-   ],
-	output: {
-		path: path.join(__dirname, 'dist'),
-		filename: 'bundle.[hash].js',
-		publicPath: '/'
-	},
-	resolve: {
-		extensions: ['*', '.ts', '.tsx', '.js', '.jsx', '.styl']
-	},
-	devtool: 'eval',
-	devServer: {
-		contentBase: '/',
-		port: process.env.PORT || 1337,
-		host: process.env.IP || 'localhost',
-		historyApiFallback: true,
-		hot: true,
-		inline: true
-	},
-	plugins: [
-		new webpack.HotModuleReplacementPlugin(),
-		new webpack.NoEmitOnErrorsPlugin(),
-		new webpack.DefinePlugin({
-			'process.env': {
-				'NODE_ENV': JSON.stringify('development')
-			},
-            PRODUCTION: JSON.stringify(false)
-		}),
-		new HtmlWebpackPlugin({
-			template: 'index.ejs',
-			inject: 'body'
-		})
-	],
-	module: {
-		rules: [
-            {
-                test: /\.(png|jpg)/,
-                loader: 'file-loader?name=[name].[ext]'
-            },
-			{
-				test: /\.jsx?$/,
-				loader: ['babel-loader'],
-				include: path.join(__dirname, 'scripts')
-			},
-            {
-                test: /\.tsx?$/,
-                loader: ['ts-loader'],
-                include: path.join(__dirname, 'scripts')
-            },
-            {
-                test: /\.less$/,
-                loader: 'style-loader!css-loader?modules!less-loader'
+  mode: 'development',
+  entry: [
+    '@babel/polyfill',
+    './scripts/index'
+  ],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.[fullhash].js',
+    publicPath: '/'
+  },
+  resolve: {
+    extensions: ['*', '.ts', '.tsx', '.js', '.jsx', '.styl']
+  },
+  devtool: 'eval',
+  devServer: {
+    contentBase: '/',
+    port: process.env.PORT || 1337,
+    host: process.env.IP || 'localhost',
+    historyApiFallback: true,
+    hot: true,
+    inline: true
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoEmitOnErrorsPlugin(),
+    new webpack.DefinePlugin({
+      'process.env': {
+        'NODE_ENV': JSON.stringify('development')
+      },
+      PRODUCTION: JSON.stringify(false)
+    }),
+    new HtmlWebpackPlugin({
+      template: 'index.ejs',
+      inject: 'body'
+    })
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.(png|jpg)/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]'
+        }
+      },
+      {
+        test: /\.jsx?$/,
+        loader: 'babel-loader',
+        include: path.join(__dirname, 'scripts')
+      },
+      {
+        test: /\.tsx?$/,
+        loader: 'ts-loader',
+        include: path.join(__dirname, 'scripts')
+      },
+      {
+        test: /\.less$/,
+        use: [
+          { loader: 'style-loader' },
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true
             }
-		]
-	}
+          },
+          { loader: 'less-loader' },
+        ]
+      }
+    ]
+  }
 }

webpack.config.production.js

@@ -11,12 +11,11 @@ config.entry = [
 ];
 config.output = {
     path: path.join(__dirname, './dist'),
-	filename: 'bundle.[hash].js',
-	publicPath: '/'
+    filename: 'bundle.[fullhash].js',
+    publicPath: '/'
 };
 config.devtool = 'source-map';
 config.plugins = [
-    new webpack.optimize.OccurrenceOrderPlugin(),
     new MiniCssExtractPlugin({
         filename: '[name].css',
         chunkFilename: '[id].css'