Fix error on load

.lintstagedrc

@@ -0,0 +1,3 @@
+{
+  "*.{js,jsx,ts,tsx,md,html,css}": "prettier --write"
+}

package.json

@@ -7,9 +7,9 @@
     "clean": "rm -rf node_modules coverage dist",
     "clean:dist": "rm -rf dist",
     "test": "jest",
-    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
-    "profile": "cross-env NODE_ENV=production webpack --profile --json --config webpack.config.js > ./dist/profile.json && webpack-bundle-analyzer ./dist/profile.json",
-    "start": "cross-env WEBPACK_IS_DEV_SERVER=true NODE_ENV=development webpack serve --config webpack.config.js",
+    "build": "cross-env NODE_ENV=production webpack --config webpack.config.babel.js",
+    "profile": "cross-env NODE_ENV=production webpack --profile --json --config webpack.config.babel.js > ./dist/profile.json && webpack-bundle-analyzer ./dist/profile.json",
+    "start": "cross-env WEBPACK_IS_DEV_SERVER=true NODE_ENV=development webpack serve --config webpack.config.babel.js",
     "release": "npm version patch",
     "update-hooks": "npx simple-git-hooks",
     "prerelease": "npm run update-hooks",
@@ -129,7 +129,7 @@
     "url-loader": "~4.1.1",
     "webpack": "~5.65.0",
     "webpack-bundle-analyzer": "~4.5.0",
-    "webpack-cli": "~4.9.1",
+    "webpack-cli": "~4.10.0",
     "webpack-dev-server": "~4.7.2",
     "webpack-merge": "~5.8.0",
     "@types/classnames": "^2.3.0"

src/index.tsx

@@ -1,13 +1,9 @@
-import '@styles/styles.css';
-/**
- * Created by: Andrey Polyakov ([email protected])
- */
-import '@styles/styles.less';
-import '@styles/styles.scss';
+import "@styles/styles.css";
+import "@styles/styles.less";
+import "@styles/styles.scss";
 
-import React from 'react';
-import ReactDom from 'react-dom';
+import { App } from "@components/app/app";
+import React from "react";
+import ReactDom from "react-dom";
 
-import {App} from '@components/app/app';
-
-ReactDom.render(<App />, document.getElementById('root'));
+ReactDom.render(<App />, document.getElementById("root"));

webpack.config.babel.js

@@ -0,0 +1,8 @@
+import merge from "webpack-merge";
+
+import baseConfig from "./webpack/base";
+import devConfig from "./webpack/dev";
+import prodConfig from "./webpack/prod";
+import { isProd } from "./webpack/utils/env";
+
+export default () => (isProd ? merge(baseConfig, prodConfig) : merge(baseConfig, devConfig));

webpack/rules/useLoaderRuleItems.js

@@ -1,47 +1,47 @@
 /**
  * Created by: Andrey Polyakov ([email protected])
  */
-import {join} from 'path';
+import { join } from "path";
 
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
 
-import {sassResourceItems} from '../config';
-import {isProd, rootDir, webpackDir} from '../utils/env';
+import { sassResourceItems } from "../config";
+import { isProd, rootDir, webpackDir } from "../utils/env";
 
 export const cssLoader = {
-    loader: 'css-loader',
+  loader: "css-loader",
 };
 
 /**
  * Sass loader with sass-resources-loader
  */
 export const sassLoaderItems = [
-    {
-        loader: 'sass-loader',
+  {
+    loader: "sass-loader",
+    options: {
+      sourceMap: true,
+      // Prefer `dart-sassRules`
+      implementation: require("sass"),
+    },
+  },
+  sassResourceItems.length
+    ? {
+        loader: "sass-resources-loader",
         options: {
-            sourceMap: true,
-            // Prefer `dart-sassRules`
-            implementation: require('sass'),
+          resources: sassResourceItems,
         },
-    },
-    sassResourceItems.length
-        ? {
-              loader: 'sass-resources-loader',
-              options: {
-                  resources: sassResourceItems,
-              },
-          }
-        : null,
+      }
+    : null,
 ];
 
 export const postCssLoader = {
-    loader: 'postcss-loader',
-    options: {
-        postcssOptions: {
-            config: join(webpackDir, './config/postcss.js'),
-        },
-        sourceMap: true,
+  loader: "postcss-loader",
+  options: {
+    postcssOptions: {
+      config: join(webpackDir, "./config/postcss.js"),
     },
+    sourceMap: true,
+  },
 };
 
 /***
@@ -50,75 +50,74 @@ export const postCssLoader = {
  * @see https://webpack.js.org/loaders/style-loader/#root
  */
 export const miniCssExtractLoader = isProd
-    ? {
-          loader: MiniCssExtractPlugin.loader,
-          options: {
-              esModule: false,
-          },
-      }
-    : {
-          loader: 'style-loader',
-          options: {
-              esModule: false,
-          },
-      };
+  ? {
+      loader: MiniCssExtractPlugin.loader,
+      options: {
+        esModule: false,
+      },
+    }
+  : {
+      loader: "style-loader",
+      options: {
+        esModule: false,
+      },
+    };
 
 /**
  * @see https://webpack.js.org/loaders/less-loader/#root
  */
 export const lessLoader = {
-    loader: 'less-loader',
-    options: {
-        sourceMap: true,
-        lessOptions: {
-            javascriptEnabled: true,
-        },
+  loader: "less-loader",
+  options: {
+    sourceMap: true,
+    lessOptions: {
+      javascriptEnabled: true,
     },
+  },
 };
 
 /**
  * Using to convert CSS modules from css-loader to TypeScript typings
  * @see https://github.com/TeamSupercell/typings-for-css-modules-loader
  */
 export const typingsCssModulesLoader = {
-    loader: '@teamsupercell/typings-for-css-modules-loader',
-    options: {
-        banner:
-            '// autogenerated by typings-for-css-modules-loader. \n// Please do not change this file!',
-        formatter: 'prettier',
-    },
+  loader: "@teamsupercell/typings-for-css-modules-loader",
+  options: {
+    banner: "// autogenerated by typings-for-css-modules-loader. \n// Please do not change this file!",
+    formatter: "prettier",
+  },
 };
 
 /**
  * @see https://webpack.js.org/loaders/sass-loader/#problems-with-url
  */
 export const resolveUrlLoader = {
-    loader: 'resolve-url-loader',
-    options: {
-        sourceMap: true,
-    },
+  loader: "resolve-url-loader",
+  options: {
+    sourceMap: true,
+  },
 };
 
 export const babelLoader = {
-    loader: 'babel-loader',
-    options: {
-        configFile: join(rootDir, '/.babelrc.js'),
-    },
+  loader: "babel-loader",
+  options: {
+    configFile: join(rootDir, "/babel.config.js"),
+  },
 };
 
 export const cssModulesSupportLoaderItems = [
-    miniCssExtractLoader,
-    typingsCssModulesLoader,
-    {
-        ...cssLoader,
-        options: {
-            esModule: false,
-            modules: {
-                exportLocalsConvention: 'camelCaseOnly',
-                localIdentName: '[local]__[contenthash:base64:5]',
-            },
-        },
+  miniCssExtractLoader,
+  typingsCssModulesLoader,
+  {
+    ...cssLoader,
+    options: {
+      esModule: false,
+      modules: {
+        exportLocalsConvention: "camelCaseOnly",
+        localIdentName: "[local]__[contenthash:base64:5]",
+      },
     },
+  },
 ];
 
 export const cssLoaderItems = [miniCssExtractLoader, cssLoader];