updated vite.config

anuj452005 · anuj452005 · commit 71535f46e45f · 2025-07-26T10:49:20.000+05:30
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,27 +13,33 @@
   "scripts": {
     "build": "vite build",
     "start": "vite",
-    "format": "prettier src -w",
-    "prepare": "npm run build"
+    "format": "prettier src -w"
   },
-  "peerDependency": {
+  "peerDependencies": {
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "react-intl": "^5.8.1"
   },
   "devDependencies": {
+    "@emotion/babel-plugin": "^11.11.0",
     "@vitejs/plugin-react": "^4.0.0",
-    "vite": "^4.0.0",
     "eslint": "^7.32.0 || ^8.2.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-hooks": "^4.3.0"
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "vite": "^4.0.0"
   },
   "files": [
     "dist"
   ],
   "dependencies": {
-    "@mui/material": "^5.15.14",
-    "@mui/icons-material": "^5.14.17"
+    "@emotion/cache": "^11.14.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^5.18.0",
+    "@mui/material": "^5.18.0",
+    "@mui/system": "^5.18.0"
   }
 }
diff --git a/src/components/TaskAllFilter.jsx b/src/components/TaskAllFilter.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { injectIntl } from 'react-intl';
 import { Grid } from '@mui/material';
-import { withTheme, withStyles } from '@mui/material/styles';
+import { withTheme, withStyles } from '@mui/styles';
 import _debounce from 'lodash/debounce';
 import {
   TextInput, PublishedComponent, formatMessage, decodeId, toISODateTime,
diff --git a/src/components/TaskFilter.jsx b/src/components/TaskFilter.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { injectIntl } from 'react-intl';
 import { Grid } from '@mui/material';
-import { withTheme, withStyles } from '@mui/material/styles';
+import { withTheme, withStyles } from '@mui/styles';
 import _debounce from 'lodash/debounce';
 import {
   TextInput, PublishedComponent, formatMessage, decodeId, toISODateTime,
diff --git a/src/components/TaskHeadPanel.jsx b/src/components/TaskHeadPanel.jsx
@@ -9,7 +9,7 @@ import {
   formatMessage,
 } from '@openimis/fe-core';
 import { injectIntl } from 'react-intl';
-import { withTheme, withStyles } from '@mui/material/styles';
+import { withTheme, withStyles } from '@mui/styles';
 import TaskStatusPicker from '../pickers/TaskStatusPicker';
 import TaskGroupPicker from '../pickers/TaskGroupPicker';
 import { TASK_STATUS, TASK_UPDATE } from '../constants';
diff --git a/src/components/TaskHistoryFilter.jsx b/src/components/TaskHistoryFilter.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { injectIntl } from 'react-intl';
 import { Grid } from '@mui/material';
-import { withTheme, withStyles } from '@mui/material/styles';
+import { withTheme, withStyles } from '@mui/styles';
 import _debounce from 'lodash/debounce';
 import {
   TextInput, PublishedComponent, formatMessage, decodeId, toISODateTime,
diff --git a/src/components/TaskPreviewPanel.jsx b/src/components/TaskPreviewPanel.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { makeStyles } from '@mui/material/styles';
+import { makeStyles } from '@mui/styles';
 import { Paper, Typography } from '@mui/material';
 import { useModulesManager } from '@openimis/fe-core';
 import { EMPTY_STRING, TASK_CONTRIBUTION_KEY } from '../constants';
diff --git a/src/components/TaskPreviewTable.jsx b/src/components/TaskPreviewTable.jsx
@@ -2,7 +2,7 @@
 import React from 'react';
 
 import { injectIntl } from 'react-intl';
-import { withStyles, withTheme } from '@mui/material/styles';
+import { withStyles, withTheme } from '@mui/styles';
 import {
   Table, TableBody, TableCell, TableContainer, TableHead, TableRow,
 } from '@mui/material';
diff --git a/src/components/groups-management/TaskGroupHeadPanel.jsx b/src/components/groups-management/TaskGroupHeadPanel.jsx
@@ -7,7 +7,7 @@ import {
   FormattedMessage,
 } from '@openimis/fe-core';
 import { injectIntl } from 'react-intl';
-import { withTheme, withStyles } from '@mui/material/styles';
+import { withTheme, withStyles } from '@mui/styles';
 import TaskExecutorsPicker from '../../pickers/TaskExecutorsPicker';
 import GroupPolicyPicker from '../../pickers/GroupPolicyPicker';
 import TaskSourcePicker from '../../pickers/TaskSourcePicker';
diff --git a/src/components/groups-management/TaskGroupsFilter.jsx b/src/components/groups-management/TaskGroupsFilter.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Grid } from '@mui/material';
-import { makeStyles } from '@mui/material/styles';
+import { makeStyles } from '@mui/styles';
 import _debounce from 'lodash/debounce';
 import { TextInput } from '@openimis/fe-core';
 import {
diff --git a/src/contributions/AdminMainMenuContributions.jsx b/src/contributions/AdminMainMenuContributions.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {
   People,
-} from '@material-ui/icons';
+} from '@mui/icons-material';
 
 import { FormattedMessage } from '@openimis/fe-core';
 import {
diff --git a/src/pages/GroupsManagementPage.jsx b/src/pages/GroupsManagementPage.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {
   Helmet, withTooltip, useTranslations, useModulesManager, useHistory,
 } from '@openimis/fe-core';
-import { makeStyles } from '@mui/material/styles';
+import { makeStyles } from '@mui/styles';
 import { useSelector } from 'react-redux';
 import { Fab } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
@@ -29,19 +29,19 @@ function GroupsManagementPage() {
 
   return (
     rights.includes(TASK_GROUP_SEARCH) && (
-    <div className={classes.page}>
-      <Helmet title={formatMessage('groupsManagement.groupHelmet')} />
-      <TaskGroupsSearcher rights={rights} />
-      {rights.includes(TASK_GROUP_CREATE)
-        && withTooltip(
-          <div className={classes.fab}>
-            <Fab color="primary" onClick={onTaskGroupAdd}>
-              <AddIcon />
-            </Fab>
-          </div>,
-          formatMessage('createButton.tooltip'),
-        )}
-    </div>
+      <div className={classes.page}>
+        <Helmet title={formatMessage('groupsManagement.groupHelmet')} />
+        <TaskGroupsSearcher rights={rights} />
+        {rights.includes(TASK_GROUP_CREATE)
+          && withTooltip(
+            <div className={classes.fab}>
+              <Fab color="primary" onClick={onTaskGroupAdd}>
+                <AddIcon />
+              </Fab>
+            </div>,
+            formatMessage('createButton.tooltip'),
+          )}
+      </div>
     )
   );
 }
diff --git a/src/pages/TaskDetailsPage.jsx b/src/pages/TaskDetailsPage.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { makeStyles } from '@mui/material/styles';
+import { makeStyles } from '@mui/styles';
 import {
   Form, Helmet,
   useHistory,
diff --git a/src/pages/TaskGroupPage.jsx b/src/pages/TaskGroupPage.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { makeStyles } from '@mui/material/styles';
+import { makeStyles } from '@mui/styles';
 import { connect, useDispatch } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import {
diff --git a/src/pages/TasksAllPage.jsx b/src/pages/TasksAllPage.jsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/destructuring-assignment */
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { makeStyles } from '@mui/material/styles';
+import { makeStyles } from '@mui/styles';
 import TaskAllSearcher from '../components/TaskAllSearcher';
 
 import {
diff --git a/src/pages/TasksManagementPage.jsx b/src/pages/TasksManagementPage.jsx
@@ -11,7 +11,7 @@ import {
 } from '@mui/material';
 import ExpandLess from '@mui/icons-material/ExpandLess';
 import ExpandMore from '@mui/icons-material/ExpandMore';
-import { makeStyles } from '@mui/material/styles';
+import { makeStyles } from '@mui/styles';
 import { TASK_CONTRIBUTION_KEY } from '../constants';
 import TaskSearcher from '../components/TaskSearcher';
 
diff --git a/vite.config.js b/vite.config.js
@@ -1,10 +1,57 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
-import pkg from './package.json';
+
+const noExternal = [
+  '@mui/material',
+  '@mui/utils',
+  '@mui/system',
+  '@mui/icons-material',
+  '@mui/styled-engine',
+  '@emotion/react',
+  '@emotion/styled',
+  '@emotion/cache'
+];
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react({
+      jsxImportSource: '@emotion/react',
+      babel: {
+        plugins: ['@emotion/babel-plugin'],
+      },
+    }),
+  ],
+  define: {
+    'process.env.NODE_ENV': JSON.stringify('production'),
+  },
+  resolve: {
+    alias: {
+      '@emotion/react': path.resolve(
+        __dirname,
+        'node_modules/@emotion/react'
+      ),
+      '@emotion/styled': path.resolve(
+        __dirname,
+        'node_modules/@emotion/styled'
+      ),
+      '@emotion/cache': path.resolve(
+        __dirname,
+        'node_modules/@emotion/cache'
+      ),
+    },
+  },
+  optimizeDeps: {
+    include: [
+      '@emotion/react',
+      '@emotion/styled',
+      '@emotion/cache',
+      '@mui/material',
+      '@mui/icons-material',
+      '@mui/system',
+    ],
+    force: true,
+  },
   build: {
     lib: {
       entry: path.resolve(__dirname, 'src/index.jsx'),
@@ -14,27 +61,50 @@ export default defineConfig({
     },
     rollupOptions: {
       external: [
+        'react',
+        'react-dom',
+        'redux',
+        'redux-api-middleware',
+        'react-redux',
+        'react-intl',
+        'prop-types',
+        'moment',
+        'lodash',
+        /^lodash\/.*/,
+        'lodash-uuid',
+        'classnames',
+        'clsx',
+        'react-autosuggest',
+        'react-router',
+        'react-router-dom',
+        'history',
+        '@emotion/react',
+        '@emotion/styled',
+        '@emotion/cache',
+        '@mui/material',
+        '@mui/icons-material',
+        '@mui/system',
+        '@mui/styles',
         /^@babel.*/,
         /^@date-io\/.*/,
         /^@material-ui\/.*/,
         /^@openimis.*/,
-        'classnames',
-        'clsx',
-        'history',
-        /^lodash.*/,
-        'moment',
-        'prop-types',
-        /^react.*/,
-        /^redux.*/,
       ],
       output: {
         globals: {
           react: 'React',
+          'react-dom': 'ReactDOM',
+          '@emotion/react': 'EmotionReact',
+          '@emotion/styled': 'EmotionStyled',
+          '@mui/material': 'MuiMaterial',
         },
       },
     },
     sourcemap: true,
     outDir: 'dist',
     emptyOutDir: true,
   },
+  ssr: {
+    noExternal,
+  },
 });
