Merge pull request #267 from htdangkhoa/develop

package.json

@@ -55,18 +55,18 @@
   "dependencies": {
     "@loadable/component": "^5.15.2",
     "@loadable/server": "^5.15.2",
-    "@reduxjs/toolkit": "^1.7.2",
-    "axios": "^0.25.0",
+    "@reduxjs/toolkit": "^1.8.0",
+    "axios": "^0.26.0",
     "compression": "^1.7.4",
     "helmet": "^5.0.2",
     "html-minifier": "^4.0.0",
     "prop-types": "^15.8.1",
     "pure-http": "^3.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-helmet-async": "^1.2.2",
+    "react-helmet-async": "^1.2.3",
     "react-redux": "^7.2.6",
-    "react-router-dom": "^6.2.1",
+    "react-router-dom": "^6.2.2",
     "react-ssr-prepass": "^1.5.0",
     "serialize-javascript": "^6.0.0",
     "serve-favicon": "^2.5.0",
@@ -77,11 +77,11 @@
     "@loadable/webpack-plugin": "^5.15.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
     "@svgr/webpack": "^6.2.1",
-    "@swc/core": "^1.2.138",
-    "@swc/jest": "^0.2.17",
+    "@swc/core": "^1.2.147",
+    "@swc/jest": "^0.2.20",
     "@testing-library/dom": "^8.11.3",
     "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
     "autoprefixer": "^10.4.2",
     "clean-webpack-plugin": "^4.0.0",
@@ -91,39 +91,39 @@
     "css-minimizer-webpack-plugin": "^3.4.1",
     "dotenv": "^16.0.0",
     "dotenv-expand": "^8.0.1",
-    "eslint": "^8.8.0",
+    "eslint": "^8.10.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-prettier": "^8.4.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react": "^7.29.2",
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-webpack-plugin": "^3.1.1",
     "glob": "^7.2.0",
     "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.5.1",
-    "lint-staged": "^12.3.3",
+    "lint-staged": "^12.3.4",
     "mini-css-extract-plugin": "^2.5.3",
     "nock": "^13.2.4",
     "picocolors": "^1.0.0",
     "plop": "^3.0.5",
-    "postcss": "^8.4.6",
+    "postcss": "^8.4.7",
     "postcss-loader": "^6.2.1",
     "prettier": "^2.5.1",
     "process": "^0.11.10",
     "react-dev-utils": "^12.0.0",
     "react-error-overlay": "6.0.10",
     "react-refresh": "^0.11.0",
-    "sass": "^1.49.7",
-    "sass-loader": "^12.4.0",
+    "sass": "^1.49.9",
+    "sass-loader": "^12.6.0",
     "style-loader": "^3.3.1",
     "supertest": "^6.2.2",
     "swc-loader": "^0.1.15",
     "terser-webpack-plugin": "^5.3.1",
-    "webpack": "^5.68.0",
+    "webpack": "^5.69.1",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^4.9.2",
     "webpack-dev-middleware": "^5.3.1",
@@ -132,7 +132,7 @@
     "webpack-hot-middleware": "^2.25.1",
     "webpack-merge": "^5.8.0",
     "webpack-node-externals": "^3.0.0",
-    "workbox-webpack-plugin": "^6.4.2",
+    "workbox-webpack-plugin": "^6.5.0",
     "ws": "^8.5.0"
   },
   "engines": {

src/client/app/index.jsx

@@ -5,6 +5,7 @@ import { Routes, Route } from 'react-router-dom';
 import appConfig from 'configs/client';
 import routes from 'client/routes';
 import Loading from 'client/components/Loading';
+import { makeId } from 'client/utils/string';
 
 const Header = React.lazy(() => import('client/components/Header'));
 
@@ -16,7 +17,7 @@ const App = () => (
 
     <main>
       <Routes>
-        {routes.map(({ path, to, element: Element }, i) => {
+        {routes.map(({ path, to, element: Element }) => {
           const elementProps = {};
 
           // handle redirects with Navigate component
@@ -26,7 +27,7 @@ const App = () => (
             elementProps.replace = true;
           }
 
-          return <Route path={path} element={<Element {...elementProps} />} key={i.toString()} />;
+          return <Route path={path} element={<Element {...elementProps} />} key={makeId()} />;
         })}
       </Routes>
     </main>

src/server/render/render-html.js

@@ -36,6 +36,8 @@ const renderHtml = (head, canonical, extractor, markup, initialState = {}) => {
         
         ${googleMetaTag}
 
+        ${process.env.SECRET}
+
         ${head.title.toString()}
         ${head.base.toString()}
         ${head.meta.toString()}