updated packages to latest version

added eslint
added react-refresh
added fork-ts-checker-webpack-plugin

Author: glook

.babelrc

@@ -0,0 +1,35 @@
+/**
+ * Created by: Andrey Polyakov (andrey@polyakov.im)
+ */
+const {argv} = require('yargs');
+module.exports = (api) => {
+    const {env} = argv;
+    const mode = env.mode ? env.mode : 'production';
+    // This caches the Babel config by environment.
+    api.cache.using(() => mode);
+    return {
+        presets: [
+            [
+                '@babel/preset-env',
+                {
+                    targets: {
+                        browsers: ['>1%', 'last 4 versions', 'not ie < 9'],
+                    },
+                    useBuiltIns: 'usage',
+                    debug: false,
+                    corejs: 3,
+                },
+            ],
+            '@babel/preset-react',
+        ],
+        plugins: [
+            '@babel/plugin-syntax-dynamic-import',
+            '@babel/plugin-proposal-class-properties',
+            '@babel/plugin-proposal-export-namespace-from',
+            '@babel/plugin-proposal-throw-expressions',
+            '@babel/proposal-object-rest-spread',
+            // Applies the react-refresh Babel plugin on non-production modes only
+            mode !== 'production' && 'react-refresh/babel',
+        ].filter(Boolean),
+    };
+};

.babelrc.js

@@ -0,0 +1,2 @@
+node_modules
+dist

.eslintignore

@@ -0,0 +1,48 @@
+const path = require('path');
+module.exports = {
+    parser: '@typescript-eslint/parser', // Specifies the ESLint parser
+    plugins: ['@typescript-eslint', 'react'],
+    env: {
+        browser: true,
+        jest: true,
+    },
+    extends: [
+        'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+        'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
+        'prettier/react', // disables react-specific linting rules that conflict with prettier
+    ],
+    parserOptions: {
+        project: path.resolve(__dirname, './tsconfig.json'),
+        tsconfigRootDir: __dirname,
+        ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
+        sourceType: 'module', // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true, // Allows for the parsing of JSX
+        },
+    },
+    rules: {
+        // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+        // e.g. "@typescript-eslint/explicit-function-return-type": "off",
+        '@typescript-eslint/explicit-function-return-type': 'off',
+        '@typescript-eslint/no-unused-vars': 'off',
+
+        // These rules don't add much value, are better covered by TypeScript and good definition files
+        'react/no-direct-mutation-state': 'off',
+        'react/no-deprecated': 'off',
+        'react/no-string-refs': 'off',
+        'react/require-render-return': 'off',
+
+        'react/jsx-filename-extension': [
+            'warn',
+            {
+                extensions: ['.jsx', '.tsx'],
+            },
+        ], // also want to use with ".tsx"
+        'react/prop-types': 'off', // Is this incompatible with TS props type?
+    },
+    settings: {
+        react: {
+            version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
+        },
+    },
+};

.eslintrc

@@ -1,6 +1,6 @@
 {
   "name": "webpack4-es6-sass",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -10,78 +10,81 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-proposal-export-namespace-from": "^7.8.3",
-    "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
-    "@babel/plugin-proposal-throw-expressions": "^7.8.3",
+    "@babel/core": "^7.10.2",
+    "@babel/plugin-proposal-class-properties": "^7.10.1",
+    "@babel/plugin-proposal-export-namespace-from": "^7.10.1",
+    "@babel/plugin-proposal-object-rest-spread": "^7.10.1",
+    "@babel/plugin-proposal-throw-expressions": "^7.10.1",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.8.3",
-    "@babel/preset-env": "^7.8.3",
-    "@babel/preset-react": "^7.8.3",
-    "@babel/register": "^7.8.3",
-    "@svgr/webpack": "^5.1.0",
-    "@teamsupercell/typings-for-css-modules-loader": "^2.1.0",
-    "autoprefixer": "^9.7.4",
-    "babel-eslint": "^10.0.3",
-    "babel-loader": "^8.0.6",
+    "@babel/plugin-transform-runtime": "^7.10.1",
+    "@babel/preset-env": "^7.10.2",
+    "@babel/preset-react": "^7.10.1",
+    "@babel/register": "^7.10.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.3.3",
+    "@svgr/webpack": "^5.4.0",
+    "@teamsupercell/typings-for-css-modules-loader": "^2.2.0",
+    "@typescript-eslint/eslint-plugin": "^3.2.0",
+    "@typescript-eslint/parser": "^3.2.0",
+    "autoprefixer": "^9.8.0",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.1.0",
     "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^5.1.1",
-    "core-js": "^3.6.4",
-    "css-loader": "3.4.2",
+    "copy-webpack-plugin": "^6.0.2",
+    "core-js": "^3.6.5",
+    "css-loader": "3.5.3",
     "cssnano": "^4.1.10",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb-base": "^14.0.0",
+    "eslint": "^7.2.0",
+    "eslint-config-airbnb-base": "^14.1.0",
+    "eslint-config-airbnb-typescript": "^8.0.2",
+    "eslint-config-prettier": "^6.11.0",
     "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-loader": "^3.0.3",
-    "eslint-plugin-import": "^2.20.0",
-    "eslint-plugin-react": "^7.18.0",
+    "eslint-loader": "^4.0.2",
+    "eslint-plugin-import": "^2.21.1",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.20.0",
+    "eslint-plugin-react-hooks": "^2.5.1",
     "expose-loader": "0.7.5",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
-    "file-loader": "5.0.2",
-    "html-loader": "^0.5.5",
-    "html-webpack-plugin": "^3.2.0",
+    "file-loader": "6.0.0",
+    "fork-ts-checker-webpack-plugin": "^4.1.6",
+    "html-loader": "^1.1.0",
+    "html-webpack-plugin": "^4.3.0",
     "is-windows": "^1.0.2",
-    "less": "^3.10.3",
-    "less-loader": "^5.0.0",
+    "less": "^3.11.3",
+    "less-loader": "^6.1.0",
     "lodash": "^4.17.15",
     "mini-css-extract-plugin": "^0.9.0",
-    "node-sass": "4.13.1",
+    "node-sass": "4.14.1",
     "path": "^0.12.7",
     "postcss-loader": "3.0.0",
-    "prettier": "^1.19.1",
-    "regenerator-runtime": "^0.13.3",
+    "prettier": "^2.0.5",
+    "react-refresh": "^0.8.3",
+    "regenerator-runtime": "^0.13.5",
     "resolve-url-loader": "3.1.1",
     "sass-loader": "^8.0.2",
-    "sass-resources-loader": "^2.0.1",
-    "style-loader": "1.1.3",
-    "svg-url-loader": "^3.0.3",
-    "terser-webpack-plugin": "^2.3.2",
+    "sass-resources-loader": "^2.0.3",
+    "style-loader": "1.2.1",
+    "svg-url-loader": "^6.0.0",
+    "terser-webpack-plugin": "^3.0.3",
     "thread-loader": "^2.1.3",
-    "ts-loader": "^6.2.1",
-    "tslint": "^5.20.1",
-    "tslint-loader": "^3.5.4",
-    "tslint-react": "^4.1.0",
-    "tslint-react-hooks": "^2.2.1",
-    "tslint-webpack-plugin": "^2.1.0",
-    "typescript": "^3.7.5",
-    "url-loader": "3.0.0",
-    "webpack": "^4.41.5",
-    "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.10.1",
+    "ts-loader": "^7.0.5",
+    "typescript": "^3.9.5",
+    "url-loader": "4.1.0",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.11.0",
     "webpack-merge": "4.2.2",
     "webpack-serve": "^3.2.0",
     "webpack-stats-plugin": "0.3.1",
-    "yargs": "^15.1.0"
+    "yargs": "^15.3.1"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.12.0",
-    "@types/classnames": "^2.2.9",
-    "@types/react": "^16.9.18",
-    "@types/react-dom": "^16.9.5",
-    "bootstrap": "^4.4.1",
+    "@types/classnames": "^2.2.10",
+    "@types/react": "^16.9.35",
+    "@types/react-dom": "^16.9.8",
     "classnames": "^2.2.6",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0"
+    "normalize.css": "^8.0.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   }
 }

.eslintrc.js

@@ -0,0 +1,27 @@
+.styles {
+    &-container {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        background: hsl(217, 47%, 52%);
+        display: flex;
+        flex-direction: column;
+        align-content: center;
+        align-items: center;
+        justify-content: center;
+    }
+
+    &-header {
+        font-size: 50px;
+        color: #fff;
+        font-family: 'Open Sans', sans-serif;
+        font-weight: 600;
+    }
+
+    &-image {
+        $size: 90px;
+        width: $size;
+        height: $size;
+        margin: 25px 0 0 0;
+    }
+}

package.json

@@ -0,0 +1,16 @@
+// autogenerated by typings-for-css-modules-loader.
+// Please do not change this file!
+declare namespace AppModuleScssNamespace {
+    export interface IAppModuleScss {
+        stylesContainer: string;
+        stylesHeader: string;
+        stylesImage: string;
+    }
+}
+
+declare const AppModuleScssModule: AppModuleScssNamespace.IAppModuleScss & {
+    /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+    locals: AppModuleScssNamespace.IAppModuleScss;
+};
+
+export = AppModuleScssModule;

src/components/app/app.module.scss

@@ -1,8 +1,15 @@
 /**
  * Created by: Andrey Polyakov (andrey@polyakov.im)
  */
-import React from 'react';
+import React, {lazy, Suspense} from 'react';
+import {stylesContainer, stylesHeader, stylesImage} from './app.module.scss';
 
-export const App = () => {
-    return <div>It works</div>;
-};
+const LazyStrawberryIcon = lazy(() => import('./strawberry'));
+export const App = (): React.ReactElement => (
+    <div className={stylesContainer}>
+        <div className={stylesHeader}>It works</div>
+        <Suspense fallback={'loading...'}>
+            <LazyStrawberryIcon className={stylesImage} />
+        </Suspense>
+    </div>
+);

src/components/app/app.module.scss.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Created by: Andrey Polyakov (andrey@polyakov.im)
+ */
+import React, {CSSProperties} from 'react';
+import StrawberryIcon from '@images/strawberry.component.svg';
+
+export default ({
+    style,
+    className,
+}: {
+    style?: CSSProperties;
+    className?: string;
+}): React.ReactElement => (
+    <StrawberryIcon className={className} style={style} />
+);