From 07808a8664eec9689f40943e4c5a1233d37e8b30 Mon Sep 17 00:00:00 2001 From: Yunus M Date: Thu, 7 Sep 2023 09:21:32 +0530 Subject: [PATCH] chore(FE): update webpack, add sass, remove wydr (#3503) --- frontend/package.json | 5 ++- frontend/src/index.tsx | 1 - frontend/src/wdyr.ts | 17 -------- frontend/webpack.config.js | 23 +++++++++-- frontend/webpack.config.prod.js | 21 ++++++++-- frontend/yarn.lock | 72 ++++++++++++++++++++++++++++----- 6 files changed, 102 insertions(+), 37 deletions(-) delete mode 100644 frontend/src/wdyr.ts diff --git a/frontend/package.json b/frontend/package.json index 2e349a68bd..43c26db5e3 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -97,7 +97,7 @@ "typescript": "^4.0.5", "uuid": "^8.3.2", "web-vitals": "^0.2.4", - "webpack": "^5.23.0", + "webpack": "5.88.2", "webpack-dev-server": "^4.15.1", "xstate": "^4.31.0" }, @@ -152,7 +152,6 @@ "@types/webpack-dev-server": "^4.7.2", "@typescript-eslint/eslint-plugin": "^4.33.0", "@typescript-eslint/parser": "^4.33.0", - "@welldone-software/why-did-you-render": "6.2.1", "autoprefixer": "^9.0.0", "babel-plugin-styled-components": "^1.12.0", "compression-webpack-plugin": "9.0.0", @@ -183,6 +182,8 @@ "react-hooks-testing-library": "0.6.0", "react-hot-loader": "^4.13.0", "react-resizable": "3.0.4", + "sass": "1.66.1", + "sass-loader": "13.3.2", "ts-jest": "^27.1.5", "ts-node": "^10.2.1", "typescript-plugin-css-modules": "5.0.1", diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index fd2d4c7b0e..39316b36d0 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -1,4 +1,3 @@ -import './wdyr'; import './ReactI18'; import AppRoutes from 'AppRoutes'; diff --git a/frontend/src/wdyr.ts b/frontend/src/wdyr.ts deleted file mode 100644 index e64dcca566..0000000000 --- a/frontend/src/wdyr.ts +++ /dev/null @@ -1,17 +0,0 @@ -/* eslint-disable @typescript-eslint/no-var-requires */ -/* eslint-disable global-require */ -/// -// ^ https://github.com/welldone-software/why-did-you-render/issues/161 -import React from 'react'; - -if (process.env.NODE_ENV === 'development') { - const whyDidYouRender = require('@welldone-software/why-did-you-render'); - whyDidYouRender(React, { - trackAllPureComponents: false, - trackExtraHooks: [[require('react-redux/lib'), 'useSelector']], - include: [/^ConnectFunction/], - logOnDifferentValues: true, - }); -} - -export default ''; diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js index 84e9bf3b6a..f04d2b7bc7 100644 --- a/frontend/webpack.config.js +++ b/frontend/webpack.config.js @@ -12,6 +12,10 @@ dotenv.config(); console.log(resolve(__dirname, './src/')); +const cssLoader = 'css-loader'; +const sassLoader = 'sass-loader'; +const styleLoader = 'style-loader'; + const plugins = [ new HtmlWebpackPlugin({ template: 'src/index.html.ejs' }), new webpack.ProvidePlugin({ @@ -68,9 +72,9 @@ const config = { { test: /\.css$/, use: [ - 'style-loader', + styleLoader, { - loader: 'css-loader', + loader: cssLoader, options: { modules: true, }, @@ -92,10 +96,10 @@ const config = { test: /\.less$/i, use: [ { - loader: 'style-loader', + loader: styleLoader, }, { - loader: 'css-loader', + loader: cssLoader, options: { modules: true, }, @@ -110,6 +114,17 @@ const config = { }, ], }, + { + test: /\.s[ac]ss$/i, + use: [ + // Creates `style` nodes from JS strings + styleLoader, + // Translates CSS into CommonJS + cssLoader, + // Compiles Sass to CSS + sassLoader, + ], + }, ], }, plugins, diff --git a/frontend/webpack.config.prod.js b/frontend/webpack.config.prod.js index d929118ba7..41adcabb7d 100644 --- a/frontend/webpack.config.prod.js +++ b/frontend/webpack.config.prod.js @@ -13,6 +13,10 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); const Critters = require('critters-webpack-plugin'); +const cssLoader = 'css-loader'; +const sassLoader = 'sass-loader'; +const styleLoader = 'style-loader'; + const plugins = [ new HtmlWebpackPlugin({ template: 'src/index.html.ejs' }), new CompressionPlugin({ @@ -80,7 +84,7 @@ const config = { use: [ MiniCssExtractPlugin.loader, { - loader: 'css-loader', + loader: cssLoader, options: { modules: true, }, @@ -102,10 +106,10 @@ const config = { test: /\.less$/i, use: [ { - loader: 'style-loader', + loader: styleLoader, }, { - loader: 'css-loader', + loader: cssLoader, options: { modules: true, }, @@ -120,6 +124,17 @@ const config = { }, ], }, + { + test: /\.s[ac]ss$/i, + use: [ + // Creates `style` nodes from JS strings + styleLoader, + // Translates CSS into CommonJS + cssLoader, + // Compiles Sass to CSS + sassLoader, + ], + }, ], }, plugins, diff --git a/frontend/yarn.lock b/frontend/yarn.lock index d700818ab1..73829b8880 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -3807,13 +3807,6 @@ resolved "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.7.0.tgz" integrity sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q== -"@welldone-software/why-did-you-render@6.2.1": - version "6.2.1" - resolved "https://registry.npmjs.org/@welldone-software/why-did-you-render/-/why-did-you-render-6.2.1.tgz" - integrity sha512-eIVKeK6ueS3tuzCqMVTaaNrPYvb9cA8NHiNgLA7Op8SD4TiT31zqNjxmhzLEK+y3sBxcwr6YhsiQGX9EThrvaw== - dependencies: - lodash "^4" - "@xobotyi/scrollbar-width@^1.9.5": version "1.9.5" resolved "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz" @@ -3876,6 +3869,11 @@ acorn-import-assertions@^1.7.6: resolved "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz" integrity sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw== +acorn-import-assertions@^1.9.0: + version "1.9.0" + resolved "https://registry.yarnpkg.com/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz#507276249d684797c84e0734ef84860334cfb1ac" + integrity sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA== + acorn-jsx@^5.3.1: version "5.3.2" resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz" @@ -6334,6 +6332,14 @@ enhanced-resolve@^5.13.0, enhanced-resolve@^5.7.0: graceful-fs "^4.2.4" tapable "^2.2.0" +enhanced-resolve@^5.15.0: + version "5.15.0" + resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz#1af946c7d93603eb88e9896cee4904dc012e9c35" + integrity sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg== + dependencies: + graceful-fs "^4.2.4" + tapable "^2.2.0" + enquirer@^2.3.5: version "2.3.6" resolved "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz" @@ -9255,7 +9261,7 @@ lodash.uniq@^4.5.0: resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz" integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ== -lodash@4.17.21, lodash@^4, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0: +lodash@4.17.21, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0: version "4.17.21" resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== @@ -11808,7 +11814,14 @@ safe-regex-test@^1.0.0: resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz" integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== -sass@^1.58.3: +sass-loader@13.3.2: + version "13.3.2" + resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-13.3.2.tgz#460022de27aec772480f03de17f5ba88fa7e18c6" + integrity sha512-CQbKl57kdEv+KDLquhC+gE3pXt74LEAzm+tzywcA0/aHZuub8wTErbjAoNI57rPUWRYRNC5WUnNl8eGJNbDdwg== + dependencies: + neo-async "^2.6.2" + +sass@1.66.1, sass@^1.58.3: version "1.66.1" resolved "https://registry.yarnpkg.com/sass/-/sass-1.66.1.tgz#04b51c4671e4650aa393740e66a4e58b44d055b1" integrity sha512-50c+zTsZOJVgFfTgwwEzkjA3/QACgdNsKueWPyAR0mRINIvLAStVQBbPg14iuqEQ74NPDbXzJARJ/O4SI1zftA== @@ -11854,6 +11867,15 @@ schema-utils@^3.0.0, schema-utils@^3.1.0, schema-utils@^3.1.1, schema-utils@^3.1 ajv "^6.12.5" ajv-keywords "^3.5.2" +schema-utils@^3.2.0: + version "3.3.0" + resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.3.0.tgz#f50a88877c3c01652a15b622ae9e9795df7a60fe" + integrity sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg== + dependencies: + "@types/json-schema" "^7.0.8" + ajv "^6.12.5" + ajv-keywords "^3.5.2" + schema-utils@^4.0.0: version "4.0.1" resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.1.tgz" @@ -13400,7 +13422,37 @@ webpack-sources@^3.2.3: resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz" integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w== -webpack@^5, webpack@^5.1.0, webpack@^5.23.0: +webpack@5.88.2: + version "5.88.2" + resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.88.2.tgz#f62b4b842f1c6ff580f3fcb2ed4f0b579f4c210e" + integrity sha512-JmcgNZ1iKj+aiR0OvTYtWQqJwq37Pf683dY9bVORwVbUrDhLhdn/PlO2sHsFHPkj7sHNQF3JwaAkp49V+Sq1tQ== + dependencies: + "@types/eslint-scope" "^3.7.3" + "@types/estree" "^1.0.0" + "@webassemblyjs/ast" "^1.11.5" + "@webassemblyjs/wasm-edit" "^1.11.5" + "@webassemblyjs/wasm-parser" "^1.11.5" + acorn "^8.7.1" + acorn-import-assertions "^1.9.0" + browserslist "^4.14.5" + chrome-trace-event "^1.0.2" + enhanced-resolve "^5.15.0" + es-module-lexer "^1.2.1" + eslint-scope "5.1.1" + events "^3.2.0" + glob-to-regexp "^0.4.1" + graceful-fs "^4.2.9" + json-parse-even-better-errors "^2.3.1" + loader-runner "^4.2.0" + mime-types "^2.1.27" + neo-async "^2.6.2" + schema-utils "^3.2.0" + tapable "^2.1.1" + terser-webpack-plugin "^5.3.7" + watchpack "^2.4.0" + webpack-sources "^3.2.3" + +webpack@^5, webpack@^5.1.0: version "5.81.0" resolved "https://registry.npmjs.org/webpack/-/webpack-5.81.0.tgz" integrity sha512-AAjaJ9S4hYCVODKLQTgG5p5e11hiMawBwV2v8MYLE0C/6UAGLuAF4n1qa9GOwdxnicaP+5k6M5HrLmD4+gIB8Q==