如何解决ant design 5.0.3上Timepicker导入问题？

Question

将 ant design 升级到 5.0.3 后，出现 Uncaught Error: Cannot find module 'antd/lib/time-picker/style' at webpackMissingModule 错误。如何解决这个问题？

我想解决从ant design库得到的错误。

Answer 1

查看如何从 V4 迁移到 V5：https://ant.design/docs/react/migration-v5

甚至还有一些

Timepicker

组件的升级。

Answer 2

使用 Antd 5.0.6 遇到同样的问题。

import { TimePicker, Form } from 'antd'

const Page = () => {
  return (
    <Form layout='vertical'>
      <Form.Item label='Time picker'>
        <TimePicker format={'HH:mm'} />
      </Form.Item>
    </Form>)
}

并不断收到错误

找不到模块：无法解析“antd/lib/time-picker/style”

查看

node_modules.antd

文件夹时，似乎

time-picker

文件夹组件不包含任何样式文件夹，但所有其他组件都有一个。我猜测自 5.0.0 版本以来将

time-picker

移动到

date-picker

文件夹之外时丢失了一个文件。

如果将样式文件夹从

date-picker

复制并粘贴到

time-picker

文件夹中，它似乎可以工作。

Answer 3

如果你仍然使用 babel 导入，这将是你得到的错误。 修复方法如迁移指南中所述：

从package.json中删除babel-plugin-import并修改.babelrc：

"plugins": [
- ["import", { "libraryName": "antd", "libraryDirectory": "lib"}, "antd"],
]

如果您将 babel-plugin-import 用于其他用途，则可能不需要删除该包。

Answer 4

使用 DatePicker 而不是 TimePicker

import { DatePicker } from "antd";

它对我有同样的问题。