Vite - 依赖问题 react-data-table-component

Question

嗨！有人可以帮助我吗？

当我运行 localhost 时，我的应用程序正常工作，但是在构建之后，使用 vite“vite preview”，我遇到了这个问题，初始页面没有加载，因为这个。

未捕获的类型错误：l.default.div 不是一个函数 在 index-fce069cc.js:723:18 在 index-fce069cc.js:1101:18636

我发现错误发生在文件中，正是在这一点上

const TableStyle = styled__default["default"].div `
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-width: 100%;
    ${({ disabled }) => disabled && disabledCSS};
    ${({ theme }) => theme.table.style};
`;

.

React-data-table-component 是我项目的一些库的依赖。下面是我的 package.json

{
  "name": "devolution",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "start": "vite",
    "dev": "vite --mode localdev",
    "build:development": "tsc && vite build --mode development",
    "build:staging": "tsc && vite build --mode staging",
    "build:production": "tsc && vite build",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "test": "vitest",
    "test:ui": "vitest --ui",
    "coverage": "vitest run --coverage"
  },
  "dependencies": {
    "@emotion/react": "11.7.1",
    "@emotion/styled": "^11.6.0",
    "@mui/lab": "^5.0.0-alpha.67",
    "@mui/material": "^5.4.0",
    "@mui/styles": "^5.3.0",
    "@mui/x-date-pickers": "^5.0.20",
    "@trendyol-js/react-carousel": "^2.0.1",
    "axios": "^1.3.4",
    "devextreme": "^22.2.4",
    "devextreme-react": "^22.2.4",
    "exceljs": "^4.3.0",
    "file-saver": "^2.0.5",
    "jose": "^4.13.1",
    "react": "^18.2.0",
    "react-datepicker": "^4.8.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.3.1",
    "react-id-generator": "^3.0.2",
    "react-router-dom": "^5.2.0",
    "react-spring": "^9.1.2",
    "sass": "^1.59.3",
    "styled-components": "^5.3.9",
    "vite-plugin-svgr": "^2.4.0",
    "vite-tsconfig-paths": "^4.0.7"
  },
  "devDependencies": {
    "@babel/preset-typescript": "^7.21.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@types/file-saver": "^2.0.5",
    "@types/material-ui": "0.21.12",
    "@types/node": "12.0.0",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@types/react-router-dom": "^5.1.7",
    "@types/styled-components": "^5.1.9",
    "@vitejs/plugin-react": "^3.1.0",
    "env-cmd": "^10.1.0",
    "jest": "^29.5.0",
    "jsdom": "^21.1.1",
    "msw": "^1.1.1",
    "ts-jest": "^29.0.5",
    "typescript": "^4.9.3",
    "vite": "^4.2.0",
    "vitest": "^0.29.7"
  }
}

vite.config.ts

import type { InlineConfig } from 'vitest';
import type { UserConfig } from 'vite';
import { defineConfig } from 'vite'
import svgr from 'vite-plugin-svgr'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'

interface VitestConfigExport extends UserConfig {
  test: InlineConfig;
}

export default defineConfig({

  plugins: [react(), svgr(), tsconfigPaths()],

  server: {
    open: true,
    port: 3000,
    host: true,
  },

  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./src/setup.ts'],
  },
  
  build: {
    outDir: './build',
  },

} as VitestConfigExport)

tsconfig.node.json

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

有人在隧道尽头给我一盏灯吗？

我实际上不知道我应该做什么，因为我不能从这个项目中删除任何库所以我认为必须有一些设置来解决这个问题，因为这个相同的应用程序是从 CRA 生成的。

提前致谢