reactjs - vite@4.x + ant@3.x + React@16 : Unknown theme type: undefined, 名称错误:未定义

Question

我正在尝试将一个旧项目迁移到vite中，并且我非常接近成功。当我在服务器上部署应用程序时，ant design 的一个 javascript 文件中只有一个错误发生。

bug .

这发生在 [email protected] 导出的以下函数中

export function withSuffix(name, theme) {
  switch (theme) {
    case "fill":
      return name + "-fill";
    case "outline":
      return name + "-o";
    case "twotone":
      return name + "-twotone";
    default:
      throw new TypeError("Unknown theme type: " + theme + ", name: " + name);
  }
}

icons.forEach(function (icon) {
  _this2.definitions.set(withSuffix(icon.name, icon.theme), icon);
});

我认为这个 forEach 循环正在未定义的数组([未定义，未定义..])上运行，但我不明白为什么。我怀疑这是由于我的 vite 文件或其他配置中缺少某些配置。

如果我将代码更改为这样，

export function withSuffix(name, theme) {
  switch (theme) {
    case "fill":
      return name + "-fill";
    default:
    case "outline":
      return name + "-o";
    case "twotone":
      return name + "-twotone";
  }
}

我的项目在本地和服务器上都能完美运行。这是我的 package.json 和 vite.config.ts

`{
  "name": "ta",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "start": "vite --mode local",
    "start:dev": "vite --mode local-development",
    "start:qa": "vite --mode local-qa",
    "build:dev": "tsc && vite build --base=/ta-admin --mode development",
    "build:qa": "tsc && vite build --base=/ta-admin --mode qa",
    "build:staging": "tsc && vite build --base=/admin --mode staging",
    "build:prod": "tsc && vite build --base=/admin --mode production",
    "preview": "vite preview"
  },
  "dependencies": {
    "@ant-design/plots": "^1.2.4",
    "@material-ui/core": "^4.4.0",
    "@material-ui/icons": "^4.2.1",
    "@reduxjs/toolkit": "^1.9.2",
    "antd": "^3.19.3",
    "antd-virtual-select": "^1.1.2",
    "axios": "^1.3.0",
    "file-saver": "^2.0.5",
    "history": "^4.10.1",
    "html2canvas": "^1.4.1",
    "immutability-helper": "^3.0.1",
    "jquery": "^3.6.3",
    "jspdf": "^2.5.1",
    "keycloak-js": "^20.0.3",
    "less": "^4.1.3",
    "loadable-components": "^2.2.3",
    "lodash-decorators": "^6.0.1",
    "lodash.difference": "^4.5.0",
    "moment": "^2.29.4",
    "popper.js": "^1.16.1",
    "react": "^16.8.6",
    "react-dnd": "^9.4.0",
    "react-dnd-html5-backend": "^9.4.0",
    "react-dom": "^16.8.6",
    "react-html-parser": "^2.0.2",
    "react-intl": "^2.9.0",
    "react-intl-universal": "^2.6.11",
    "react-monaco-editor": "^0.31.0",
    "react-redux": "^8.0.5",
    "react-router-dom": "^5.3.4",
    "styled-components": "^5.3.6"
  },
  "devDependencies": {
    "@types/node": "^18.11.18",
    "@types/react": "^16.8.6",
    "@types/react-dom": "^18.0.10",
    "@types/react-router-dom": "^5.3.3",
    "@vitejs/plugin-react": "^3.0.0",
    "typescript": "^4.9.5",
    "vite": "^4.0.0"
  }
}

import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";

const getApiHost = (npm_lifecycle_event: string) => {
  switch (npm_lifecycle_event) {
    default:
    case "start":
      return "http://localhost:8080";
  }
};

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");
  const scriptArray = env?.npm_lifecycle_script?.split(" ") || [];
  const basePortion = scriptArray.find((scriptPortion) => {
    return scriptPortion.includes("--base");
  });
  let outDir = basePortion ? basePortion.split("/")[1] : "build";
  const target = getApiHost(env.npm_lifecycle_event);
  const runningLocally = mode.includes("local");

  return {
    plugins: [react()],
    ...(runningLocally
      ? {
          define: {
            global: {},
          },
        }
      : {}),
    server: {
      port: 3000,
      open: true,
      proxy: {
        "/api": {
          target,
          changeOrigin: true,
          secure: false,
        },
      },
    },
    css: {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true,
          additionalData: "@root-entry-name: default;",
        },
      },
    },
    build: {
      outDir,
      commonjsOptions: {
        transformMixedEsModules: true,
      },
    },
  };
});

Answer 1

问题是由于“命名空间导入”

https://github.com/ant-design/ant-design/blob/3.x-stable/components/icon/index.tsx#L4

import * as allIcons from '@ant-design/icons/lib/dist';

当由于某种原因构建完成时，vite 添加了“allIcons.default”属性，这会破坏一切

const allIcons = /*#__PURE__*/ _mergeNamespaces(
  {
    WindowsFill,
    WindowsOutline,
    WomanOutline,
    YahooFill,
    YahooOutline,
    YoutubeFill,
    YoutubeOutline,
    YuqueFill,
    YuqueOutline,
    ZhihuCircleFill,
    ZhihuOutline,
    ZhihuSquareFill,
    ZoomInOutline,
    ZoomOutOutline,
    default: dist$4,
  },
  [dist$4]
);

四小时后

我找到了问题的原因

https://github.com/rollup/plugins/blob/54c1a7cd6754e2f7b03615529869fd6711fc17fe/packages/commonjs/src/generate-exports.js#L229

我创建了一个插件来解决这个问题:

vite.config.ts

function antDesignIconsFix() {
  return {
    name: '@ant-design-icons-fix',
    transform(code, id) {
      if (id.includes('@ant-design/icons/lib/dist.js'))
        return code.replace(', dist as default', '')
      return code
    },
  }
}

export default defineConfig({
    ...,
    build: {
      rollupOptions: {
        plugins: [antDesignIconsFix()],
      },
    }
})