Material UI 和 Vite 存在问题

Question

我最近从 CRA 迁移到了 Vite。我有一个主要的工作存储库，对于 UI 库，我们有一个单独的存储库，我们将该包从 azure 工件导入到主存储库中。

之前，我们运行 CRA 时没有出现任何问题。但是当我切换到Vite时，页面崩溃并出现随机错误。主要与材质表有关。任何帮助表示赞赏。谢谢你

CRA 主要工作仓库 package.json

{
  "name": "xxxxx-admin-portal",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@date-io/date-fns": "^1.3.13",
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@hookform/resolvers": "^1.3.2",
    "@material-table/core": "^2.3.20",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@material-ui/pickers": "^3.2.10",
    "@microsoft/signalr": "^6.0.16",
    "@mui/icons-material": "^5.0.1",
    "@mui/material": "^5.0.2",
    "@reduxjs/toolkit": "^1.6.1",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.1",
    "@types/react-dom": "^17.0.1",
    "axios": "^0.24.0",
    "date-fns": "^2.16.1",
    "file-saver": "^2.0.5",
    "html-react-parser": "^1.4.0",
    "jimp": "^0.16.1",
    "lodash": "^4.17.21",
    "xxxxx-ui-library": "^0.12.33",
    "msal": "^1.4.12",
    "notistack": "^1.0.6",
    "query-string": "^6.13.8",
    "react": "^17.0.2",
    "react-aad-msal": "^2.3.5",
    "react-dom": "^17.0.1",
    "react-dropzone": "^11.3.2",
    "react-fetching-library": "^1.7.5",
    "react-hook-form": "^6.14.2",
    "react-idle-timer": "^5.5.2",
    "react-movable": "^3.0.4",
    "react-number-format": "^4.5.5",
    "react-pdf": "^5.3.0",
    "react-quill": "^1.3.5",
    "react-responsive-carousel": "^3.2.23",
    "react-router-dom": "^5.3.1",
    "react-scripts": "4.0.1",
    "react-signature-canvas": "^1.0.6",
    "react-to-print": "^2.14.7",
    "react-xml-parser": "^1.1.8",
    "redux-persist": "^6.0.0",
    "typescript": "^4.0.3",
    "web-vitals": "^0.2.4",
    "yup": "^0.32.8"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "prettier": "prettier \"src/**/*.+(ts|tsx|js)\"",
    "format": "yarn prettier --write"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@hookform/devtools": "^2.2.1",
    "@types/file-saver": "^2.0.2",
    "@types/react-input-mask": "^3.0.1",
    "@types/react-pdf": "^5.0.3",
    "@types/react-redux": "^7.1.18",
    "@types/react-router-dom": "^5.1.7",
    "@types/yup": "^0.29.11",
    "@typescript-eslint/eslint-plugin": "^5.3.1",
    "@typescript-eslint/parser": "^5.3.1",
    "eslint": "^7.26.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.26.1",
    "prettier": "^2.3.0",
    "react-error-overlay": "^6.0.9"
  }
}

Vite 主要工作仓库 package.json

{
  "name": "xxxxx-admin-portal",
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "dependencies": {
    "@date-io/date-fns": "^1.3.13",
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@hookform/resolvers": "^1.3.2",
    "@material-table/core": "^2.3.20",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@material-ui/pickers": "^3.2.10",
    "@microsoft/signalr": "^6.0.16",
    "@mui/icons-material": "^5.0.1",
    "@mui/material": "^5.0.2",
    "@reduxjs/toolkit": "^1.6.1",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.28.1",
    "date-fns": "^2.16.1",
    "file-saver": "^2.0.5",
    "html-react-parser": "^1.4.0",
    "lodash": "^4.17.21",
    "xxxxx-ui-library": "^0.12.33",
    "msal": "^1.4.12",
    "notistack": "^1.0.6",
    "query-string": "^6.13.8",
    "react": "^17.0.2",
    "react-aad-msal": "^2.3.5",
    "react-dom": "^17.0.2",
    "react-dropzone": "^11.3.2",
    "react-fetching-library": "^1.7.5",
    "react-hook-form": "^6.14.2",
    "react-idle-timer": "^5.5.2",
    "react-movable": "^3.0.4",
    "react-number-format": "^4.5.5",
    "react-quill": "^1.3.5",
    "react-responsive-carousel": "^3.2.23",
    "react-router-dom": "^5.3.1",
    "react-signature-canvas": "^1.0.6",
    "react-to-print": "^2.14.7",
    "redux-persist": "^6.0.0",
    "typescript": "^4.0.3",
    "web-vitals": "^0.2.4",
    "yup": "^0.32.8"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "prettier": "prettier \"src/**/*.+(ts|tsx|js)\"",
    "format": "yarn prettier --write",
    "dev": "vite",
    "preview": "vite preview --port=3000"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@hookform/devtools": "^2.2.1",
    "@svgr/core": "^8.1.0",
    "@svgr/plugin-jsx": "^8.1.0",
    "@types/file-saver": "^2.0.2",
    "@types/jest": "^26.0.15",
    "@types/node": "^20.11.5",
    "@types/react": "^17.0.1",
    "@types/react-dom": "^17.0.1",
    "@types/react-input-mask": "^3.0.1",
    "@types/react-redux": "^7.1.18",
    "@types/react-router-dom": "^5.1.7",
    "@types/yup": "^0.29.11",
    "@typescript-eslint/eslint-plugin": "^5.3.1",
    "@typescript-eslint/parser": "^5.3.1",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^7.26.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.26.1",
    "prettier": "^2.3.0",
    "vite": "^5.1.1",
    "vite-plugin-node-polyfills": "^0.21.0",
    "vite-tsconfig-paths": "^4.3.1"
  }
}

UI库包.json

{
  "name": "xxxxx-ui-library",
  "version": "0.12.33",
  "description": "Made with create-react-library",
  "author": "xxxx",
  "license": "UNLICENSED",
  "repository": {
    "type": "git",
    "url": "NONE"
  },
  "main": "dist/index.js",
  "module": "dist/index.modern.js",
  "source": "src/index.ts",
  "engines": {
    "node": ">=18"
  },
  "exports": {
    ".": {
      "import": "./dist/index.modern.js",
      "require": "./dist/index.js"
    }
  },
  "scripts": {
    "build": "microbundle --no-compress --format modern,cjs --jsx React.createElement",
    "start": "microbundle watch --no-compress --format modern,cjs --jsx React.createElement",
    "prepare": "run-s build",
    "test": "run-s test:unit test:lint test:build",
    "test:build": "run-s build",
    "test:lint": "eslint .",
    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
    "test:watch": "react-scripts test --env=jsdom",
    "predeploy": "cd example && npm install && npm run build",
    "deploy": "gh-pages -d example/build",
    "storybook": "storybook dev  -p 6006",
    "build-storybook": "storybook build -o storybookDist"
  },
  "devDependencies": {
    "@babel/core": "^7.12.13",
    "@storybook/addon-actions": "^8.0.6",
    "@storybook/addon-essentials": "^8.0.6",
    "@storybook/addon-links": "^8.0.6",
    "@storybook/react": "^8.0.6",
    "@storybook/react-vite": "^8.0.6",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "@types/jest": "^25.1.4",
    "@types/node": "^12.12.38",
    "@types/react": "^17.0.2",
    "@types/react-dom": "^16.9.7",
    "@types/react-highlight": "^0.12.2",
    "@types/react-input-mask": "^3.0.1",
    "@typescript-eslint/eslint-plugin": "^5.3.1",
    "@typescript-eslint/parser": "^5.3.1",
    "babel-eslint": "^10.0.3",
    "babel-loader": "^8.2.2",
    "cross-env": "^7.0.3",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.15.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-config-standard-react": "^9.2.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.26.1",
    "eslint-plugin-standard": "^4.0.1",
    "gh-pages": "^2.2.0",
    "microbundle": "^0.15.1",
    "namor": "^2.0.3",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-highlight": "^0.14.0",
    "typescript": "^4.1.2"
  },
  "files": [
    "dist"
  ],
  "dependencies": {
    "@babel/cli": "^7.12.13",
    "@babel/plugin-transform-modules-commonjs": "^7.13.0",
    "@date-io/moment": "^1.3.13",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^10.3.0",
    "@hookform/devtools": "^2.2.1",
    "@hookform/resolvers": "^1.0.1",
    "@material-table/core": "^2.3.20",
    "@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/pickers": "^3.3.10",
    "@mui/material": "^5.13.7",
    "@mui/x-date-pickers": "^7.11.0",
    "@nivo/bar": "^0.85.1",
    "@nivo/core": "^0.85.1",
    "@nivo/line": "^0.85.1",
    "@nivo/pie": "^0.85.1",
    "@types/react-table": "^7.7.7",
    "@types/yup": "^0.29.11",
    "@vitejs/plugin-react": "^4.2.1",
    "auto": "^10.16.0",
    "date-fns": "^2.25.0",
    "dayjs": "^1.11.9",
    "lodash": "^4.17.21",
    "match-sorter": "^6.3.1",
    "moment": "^2.29.1",
    "prop-types": "^15.7.2",
    "react-data-grid": "^7.0.0-beta.7",
    "react-dnd": "^14.0.4",
    "react-dnd-html5-backend": "^14.0.2",
    "react-hook-form": "^6.14.2",
    "react-input-mask": "^2.0.4",
    "react-number-format": "^4.5.5",
    "react-svg": "^12.1.0",
    "react-table": "^7.7.0",
    "storybook": "^8.0.6",
    "vite": "^5.2.8",
    "yup": "^0.32.11"
  },
  "keywords": [
    "test"
  ],
  "types": "./dist/index.d.ts"
}

UI库材质表组件

import MuiMaterialTable, {
  MaterialTableProps as MuiMaterialTableProps
} from "@material-table/core"
import { ThemeProvider } from "@material-ui/core"
import React from "react"
import MonarchTableGroupRow from "./MonarchTableGroupRow"
import { tableIcons } from "./monarchTableIcons"
import { monarchTableTheme } from "./monarchTableStyles"
import MonarchTableToolbar from "./MonarchTableToolbar"
import { GroupOptions } from "./tableHelpers"
import { fontSizes, palette } from "../../constants/brand"

export interface MaterialTableProps extends MuiMaterialTableProps<any> {
  groupOptions?: GroupOptions
  color?: "primary" | "secondary"
  isBlueTable?: boolean
  isDarkBlueTable?: boolean
}

const MaterialTable: React.FC<MaterialTableProps> = ({
  color = "primary",
  groupOptions,
  isBlueTable,
  isDarkBlueTable,
  ...props
}) => {
  const { components, options, ...otherProps } = props

  return (
    <ThemeProvider theme={monarchTableTheme}>
      <MuiMaterialTable
        icons={tableIcons}
        components={{
          Toolbar: (toolbarProps) => (
            <MonarchTableToolbar
              isBlueTable={isBlueTable}
              isDarkBlueTable={isDarkBlueTable}
              {...toolbarProps}
            />
          ),
          GroupRow: (props) => (
            <MonarchTableGroupRow groupOptions={groupOptions} {...props} />
          ),
          ...components
        }}
        style={{
          borderRadius: isBlueTable ? 13 : 0,
          boxShadow: isBlueTable ? "none" : "0 0 40px 0 rgba(0, 0, 0, 0.1);",
          border: isBlueTable ? "1.5px solid" : "none",
          borderColor: palette.primary,
          overflow: isBlueTable ? "hidden" : "auto"
        }}
        options={{
          search: false,
          paging: false,
          selection: false,
          searchFieldVariant: "outlined",
          groupRowSeparator: " ",
          defaultExpanded: true,
          hideFilterIcons: true,
          actionsColumnIndex: -1,
          showTitle: false,
          draggable: false,
          emptyRowsWhenPaging: false,
          ...options
        }}
        {...otherProps}
      />
    </ThemeProvider>
  )
}

export default MaterialTable


const MonarchTableGroupRow = ({ groupOptions, groupData, ...props }: Props) => {
  // Destruct props
  const {
    groupBadgeFilter,
    groupBadgeColor,
    showGroupTitle,
    showGroupBadges
  } = groupOptions
  const { level, groups } = props
  const [itemData, setItemData] = React.useState<any[]>([])
  // set the flags
  const showThisGroupTitle = showGroupTitle
    ? Array.isArray(showGroupTitle)
      ? showGroupTitle[level]
      : showGroupTitle
    : true
  const showThisGroupBadge = showGroupBadges
    ? Array.isArray(showGroupBadges)
      ? showGroupBadges[level]
      : showGroupBadges
    : false
  const thisGroupBadgeColor = groupBadgeColor
    ? groupBadgeColor[level]
    : undefined

  // Adjust params based on flag Settings
  const thisGroups = groups?.map((g) => {
    const found = g
    // show/hide title
    if (!showThisGroupTitle) {
      found.title = ""
    }
    if (showThisGroupBadge) {
      found.title = (
        <MonarchTableBadge
          color={thisGroupBadgeColor}
          filters={groupBadgeFilter}
          data={itemData}
        />
      )
    }
    return found
  })

  React.useEffect(() => {
    const records: any[] = []
    // set data values
    if (groupData.data !== undefined && groupData.data !== null) {
      if (groupData.data.length > 0) {
        groupData.data.forEach((d) => {
          records.push(d)
        })
      }
    }
    if (groupData.groups) {
      if (groupData.groups.length > 0) {
        groupData.groups.forEach((g) => {
          if (g.data) {
            if (g.data.length > 0) {
              g.data.forEach((d: any) => {
                records.push(d)
              })
            }
          }
        })
      }
    }
    if (records.length > 0) {
      setItemData(records)
    }
  }, [setItemData, groupData.groups])

  return (
    <MTableGroupRow
      {...props}
      level={level}
      groups={thisGroups}
      groupData={groupData}
    />
  )
}

export default MonarchTableGroupRow

我收到 useState 错误，但在组件中，我没有使用任何 usestate 挂钩，我不知道如何解决此问题

Answer 1

您在项目中使用

react

v17

，在 ui 库中使用

v18

。这就是您收到此错误的原因。