v2.0.0 版本 export 'theme' (imported as 'antdTheme') was not found in 'antd'

[oswayne]

🧐 问题描述

依赖：

"dependencies": {
    "@ant-design/icons": "^4.7.0",
    "@ant-design/pro-components": "^2.0.0",
    "axios": "^0.27.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1"
  },

Index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import {BrowserRouter, Route, Routes} from "react-router-dom";

import 'antd/dist/antd.min.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<BrowserRouter>
    <Home/>
</BrowserRouter>);

启动后控制台信息：

Failed to compile.

Attempted import error: 'theme' is not exported from 'antd' (imported as 'antdTheme').
ERROR in ./node_modules/@ant-design/pro-utils/es/useStyle/index.js 35:69-78
export 'theme' (imported as 'antdTheme') was not found in 'antd' (possible exports: Affix, Alert, Anchor, AutoComplete, Avatar, BackTop, Badge, Breadcrumb, Button, Calendar, Card, Carousel, Cascader, Checkbox, Col, Collapse, Comment, ConfigProvider, DatePicker, Descriptions, Divider, Drawer, Dropdown, Empty, Form, Grid, Image, Input, InputNumber, Layout, List, Mentions, Menu, Modal, PageHeader, Pagination, Popconfirm, Popover, Progress, Radio, Rate, Result, Row, Segmented, Select, Skeleton, Slider, Space, Spin, Statistic, Steps, Switch, Table, Tabs, Tag, TimePicker, Timeline, Tooltip, Transfer, Tree, TreeSelect, Typography, Upload, message, notification, version)

webpack compiled with 1 error

[BestDingSheng]

我也碰到了这个问题

[sushi-su]

应该是发错版本了，v2 得搭配 antdv5 使用

[BaoXiaoShuai]

一样的问题

[chenshuai2144]

这个没办法去掉，可以先忽略，
我们兼容了一下 antd 版本，但是warning 去不掉

[criejs]

我也遇到了，导致 umi/max 项目升级，在vite模式下，直接崩溃了

[gaofengGo]

这个没办法去掉，可以先忽略， 我们兼容了一下 antd 版本，但是warning 去不掉

大佬，项目用的是 vite 的话不仅仅是警告，项目启动和 build 都报错了

[Chastrlove]

报error可能是因为设置了strictExportPresence:true, webpack的可以使用如下配置。

  ignoreWarnings: [
      /export 'theme' \(imported as 'antdTheme'\) was not found in 'antd'/
    ],

[Chastrlove]

如果是vite,可以自定义个插件

optimizeDeps: {
    esbuildOptions: {
      plugins: [
        {
          name: "add-missing-theme",
          setup(build) {
            build.onLoad({ filter: /antd(?:\/|\\{1,2})es(?:\/|\\{1,2})index\.js/ }, async(args) => {
              let text = await fs.promises.readFile(args.path, 'utf8')
              return {
                contents: `
              ${text}\nexport const theme = undefined;
              `,
                loader: "js",
              };
            });
          },
        },
      ],
    }
  },

[hqwlkj]

esbuildOptions: {
      plugins: [
        {
          name: "add-missing-theme",
          setup(build) {
            build.onLoad({ filter: /antd(?:\/|\\{1,2})es(?:\/|\\{1,2})index\.js/ }, async(args) => {
              let text = await fs.promises.readFile(args.path, 'utf8')
              return {
                contents: `
              ${text}\nexport const theme = undefined;
              `,
                loader: "js",
              };
            });
          },
        },
      ],
    }

这样配置 了编译不报错，但是 运行时还是会报于这相关的错误信息

[Ariaszzzhc]

@hqwlkj 这个问题我发现是由于 SWR 的版本问题。使用 1.2.0 的 swr 就可以正常运行

[hqwlkj]

swr

没有使用到 swr 这个依赖

[hsbtr]

报error可能是因为设置了strictExportPresence:true, webpack的可以使用如下配置。

  ignoreWarnings: [
      /export 'theme' \(imported as 'antdTheme'\) was not found in 'antd'/
    ],

pro-components@2.3.30，使用这个方法还是失效了，webpack直接终止了编译，看来暂时没法用了