Antd 5.0.4 Timepicker报错：无法解析'antd/lib/time-picker/style/index.js'

问题分析 #

你遇到的Module not found: Error: Can't resolve 'antd/lib/time-picker/style/index.js'错误，核心原因是AntD V5对组件结构和样式文件路径做了调整，同时你的webpack配置存在几处缺失或不匹配的地方。

具体修复步骤 #

1. 完善Less文件的加载链式配置 #

你的webpack中处理.less的规则只配置了less-loader，缺少将编译后的CSS注入到页面的style-loader和解析CSS的css-loader，补充后规则如下：

{
    test: /\.less$/,
    use: [
        "style-loader",
        "css-loader",
        {
            loader: "less-loader",
            options: {
                lessOptions: {
                    modifyVars: v4Token,
                    javascriptEnabled: true,
                },
            },
        },
    ],
}

2. 调整ts-import-plugin的配置适配AntD V5 #

AntD V5的组件样式文件路径不再是lib/xxx/style/index.js，而是统一使用CSS文件，修改tsImportPluginFactory的style配置为'css'：

tsImportPluginFactory({
    libraryName: "antd",
    libraryDirectory: "lib",
    style: 'css', // 替换原有的true
}),

如果上述配置仍有问题，建议替换为AntD V5官方推荐的babel-plugin-import，配置示例：

// 需先安装依赖：npm install babel-plugin-import --save-dev
{
    test: /\.(jsx|tsx|js|ts)$/,
    loader: "babel-loader",
    options: {
        plugins: [
            [
                "import",
                {
                    libraryName: "antd",
                    libraryDirectory: "lib",
                    style: 'css',
                },
            ],
        ],
        presets: ["@babel/preset-react", "@babel/preset-typescript"],
    },
    exclude: /node_modules/,
}

3. 确认依赖包版本兼容性 #

• 确保@ant-design/compatible已正确安装：npm install @ant-design/compatible --save
• 检查antd版本为V5.x，less-loader版本与webpack版本匹配（建议使用less-loader 10.x以上配合webpack 5）

4. 规范组件导入方式 #

确保TimePicker的导入是从AntD主包直接导入：

import { TimePicker } from 'antd';

避免使用旧版的import TimePicker from 'antd/lib/time-picker';这种路径导入。

内容的提问来源于stack exchange，提问作者PawelKonie99