diff --git a/.babelrc b/.babelrc
deleted file mode 100644
index 57643d2..0000000
--- a/.babelrc
+++ /dev/null
@@ -1,20 +0,0 @@
-{
- "presets": [
- "@babel/env",
- "@babel/react",
- "@babel/preset-typescript"
- ],
- "plugins": [
- "@babel/plugin-transform-runtime",
- [
- "babel-plugin-direct-import",
- {
- "modules": [
- "@mui/lab",
- "@mui/material",
- "@mui/x-date-pickers"
- ]
- }
- ]
- ]
-}
\ No newline at end of file
diff --git a/.babelrc.js b/.babelrc.js
new file mode 100644
index 0000000..d59ceaa
--- /dev/null
+++ b/.babelrc.js
@@ -0,0 +1,17 @@
+module.exports = {
+ compact: false,
+ presets: [
+ "@babel/env",
+ "@babel/react",
+ "@babel/preset-typescript"
+ ],
+ plugins: [
+ "@babel/plugin-transform-runtime",
+ ["import", {
+ libraryName: "redux",
+ libraryDirectory: "src",
+ camel2DashComponentName: false,
+ transformToDefaultImport: true
+ }, "redux"]
+ ]
+}
diff --git a/client/src/components/third-party/Highlighter.jsx b/client/src/components/third-party/Highlighter.jsx
index 410eddc..23d3aed 100644
--- a/client/src/components/third-party/Highlighter.jsx
+++ b/client/src/components/third-party/Highlighter.jsx
@@ -1,12 +1,12 @@
import PropTypes from 'prop-types';
-import { useState } from 'react';
+import { useState, lazy } from 'react';
// material-ui
import { Box, CardActions, Collapse, Divider, IconButton, Tooltip } from '@mui/material';
// third-party
import { CopyToClipboard } from 'react-copy-to-clipboard';
-import reactElementToJSXString from 'react-element-to-jsx-string';
+const reactElementToJSXString = lazy(() => import('react-element-to-jsx-string'));
// project import
import SyntaxHighlight from '../../utils/SyntaxHighlight';
diff --git a/client/src/layout/MainLayout/Drawer/DrawerHeader/index.jsx b/client/src/layout/MainLayout/Drawer/DrawerHeader/index.jsx
index 5c163f8..caac00f 100644
--- a/client/src/layout/MainLayout/Drawer/DrawerHeader/index.jsx
+++ b/client/src/layout/MainLayout/Drawer/DrawerHeader/index.jsx
@@ -5,7 +5,7 @@ import { Stack, Chip, useTheme } from '@mui/material';
// project import
import DrawerHeaderStyled from './DrawerHeaderStyled';
import Logo from '../../../../components/Logo';
-import {version} from '../../../../../../package.json';
+import packageInfo from '../../../../../../package.json';
// ==============================|| DRAWER HEADER ||============================== //
@@ -17,7 +17,7 @@ const DrawerHeader = ({ open }) => {