Переписываю спорные решения

Фикс отправки отчета, проверка на массив в map в Description.js

config/webpack/analyze.js

@@ -0,0 +1,10 @@
+const { merge } = require('webpack-merge');
+
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
+    .BundleAnalyzerPlugin;
+
+const prod = require('./prod');
+
+module.exports = merge(prod, {
+    plugins: [new BundleAnalyzerPlugin()]
+});

config/webpack/common.js

@@ -0,0 +1,129 @@
+const paths = require('../paths');
+
+const webpack = require('webpack');
+
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+const Dotenv = require('dotenv-webpack');
+
+
+const plugins = [
+  '@babel/plugin-proposal-class-properties',
+  '@babel/plugin-syntax-dynamic-import',
+  '@babel/plugin-transform-runtime'
+];
+
+if (process.env.NODE_ENV === 'development') {
+  plugins.push('react-refresh/babel');
+}
+
+const babelLoader = {
+  loader: 'babel-loader',
+  options: {
+    presets: [
+      // "react-app",
+      '@babel/preset-env',
+      '@babel/preset-react',
+    ],
+    plugins: plugins
+  }
+};
+
+module.exports = {
+  entry: `${paths.src}/index.js`,
+  output: {
+    path: paths.build,
+    filename: '[name].bundle.js',
+    publicPath: '/',
+    // publicPath: 'https://itguild.info',
+    asyncChunks: true,
+    clean: true,
+    crossOriginLoading: 'anonymous',
+    module: true,
+    environment: {
+      arrowFunction: true,
+      bigIntLiteral: false,
+      const: true,
+      destructuring: true,
+      dynamicImport: false,
+      forOf: true
+    }
+  },
+  resolve: {
+    alias: {
+      '@': `${paths.src}/modules`
+    },
+    extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json']
+  },
+  experiments: {
+    topLevelAwait: true,
+    outputModule: true
+  },
+  module: {
+    rules: [
+
+      // JavaScript, React
+      {
+        test: /\.m?jsx?$/i,
+        exclude: /node_modules/,
+        use: babelLoader
+      },
+      // TypeScript
+      {
+        test: /.tsx?$/i,
+        exclude: /node_modules/,
+        use: [babelLoader, 'ts-loader']
+      },
+      // CSS, SASS
+      {
+        test: /\.(c|sa|sc)ss$/i,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {importLoaders: 1}
+          },
+          'sass-loader'
+        ]
+      },
+      // MD
+      {
+        test: /\.md$/i,
+        use: ['html-loader', 'markdown-loader']
+      },
+      // static files
+      {
+        test: /\.(jpe?g|png|gif|svg|eot|ttf|woff2|woff?)$/i,
+        type: 'asset/resource'
+      }
+    ]
+  },
+  plugins: [
+    new webpack.ProgressPlugin(),
+
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: `${paths.public}`,
+          globOptions: {
+            ignore: ["**/index.html"]
+          }
+        }
+      ]
+    }),
+
+    new HtmlWebpackPlugin({
+      template: `${paths.public}/index.html`,
+      // filename: 'index.html',
+    }),
+
+    new webpack.ProvidePlugin({
+      React: 'react'
+    }),
+
+    new Dotenv({
+      path: '.env'
+    })
+  ]
+};

config/webpack/dev.js

@@ -0,0 +1,23 @@
+const paths = require('../paths');
+
+const webpack = require('webpack');
+const {merge} = require('webpack-merge');
+
+const common = require('./common');
+
+module.exports = merge(common, {
+  target : 'web',
+  mode: 'development',
+  devtool: 'eval-cheap-source-map',
+
+  devServer: {
+    compress: true,
+    static: paths.build,
+    hot: true,
+    historyApiFallback: true,
+    // open: true,
+    port: 3000,
+
+  },
+  plugins: [new webpack.HotModuleReplacementPlugin()]
+});

config/webpack/prod.js

@@ -0,0 +1,62 @@
+const paths = require('../paths');
+const {merge} = require('webpack-merge');
+const common = require('./common');
+
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+
+module.exports = merge(common, {
+    mode: 'production',
+    target :'browserslist',
+    entry: {
+        index: {
+            import: `${paths.src}/index.js`,
+            dependOn: ['react', 'helpers']
+        },
+        react: ['react', 'react-dom', 'prop-types'],
+        helpers: ['immer', 'nanoid']
+    },
+    devtool: false,
+    output: {
+        filename: 'js/[name].[hash:8].bundle.js',
+        publicPath: '/',
+        assetModuleFilename: 'media/[hash][ext][query]'
+    },
+    module: {
+        rules: [
+            {
+                test: /\.(c|sa|sc)ss$/i,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    {
+                        loader: 'css-loader',
+                        options: {importLoaders: 1}
+                    },
+                    'postcss-loader',
+                    'sass-loader'
+                ]
+            },
+            {
+                test: /\.(jpe?g|png|gif|svg)$/i,
+                // type: 'asset/resource'
+                type: 'asset'
+            },
+
+        ]
+    },
+    plugins: [
+        new MiniCssExtractPlugin({
+            filename: '[name].[contenthash].css',
+            chunkFilename: '[id].css'
+        }),
+
+    ],
+    optimization: {
+        runtimeChunk: 'single'
+    },
+    performance: {
+        hints: 'warning',
+        maxEntrypointSize: 512000,
+        maxAssetSize: 512000
+    }
+});