zhangyuang / ssr

A most advanced ssr framework support React17/React18/Vue2/Vue3 on Earth that implemented serverless-side render specification.
http://doc.ssr-fc.com/
MIT License
2.59k stars 283 forks source link

无法引用ant-design-vue v3组件名称与路径命名不同的组件,如a-input-search #201

Closed ygsz closed 2 years ago

ygsz commented 2 years ago

详细描述你的问题

nestjs-vue3-ssr-pinia 模板引用 ant-design-vue 无法使用a-input-search组件就报错 Module not found: Error: Can't resolve 'ant-design-vue/lib/input-search' in 'D:\vue3\pc-shop-ssr\web\pages\index'
Module not found: Error: Can't resolve 'ant-design-vue/lib/input-search/style' in 'D:\vue3\pc-shop-ssr\web\pages\index' 类似的组件如 a-input-search 、a-breadcrumb-item

期望的结果

可以正常使用ant-design-vue的a-input-search 、a-breadcrumb-item组件,组件名称与组件路径不同的组件

当前使用的版本

dependencies: ssr-core-vue3 6.2.13 ssr-hoc-vue3 6.2.0 ssr-server-utils 6.2.22 ant-design-vue:3.2.3

devDependencies: ssr 6.2.18 ssr-plugin-nestjs 6.2.10 ssr-plugin-vue3 6.2.23 ssr-types 6.2.11

复现仓库地址

import {  InputSearch as AInputSearch } from 'ant-design-vue'  
<a-input-search   placeholder="input search text"  style="width: 200px"     />

你本人对问题可能的原因判断(如果你能大概判断的话)

ant-design-vue库不是所有组件lib路径都是按引入名称来的,需要做映射转换

zhangyuang commented 2 years ago

此问题与 ssr 框架无关,由于默认开启了 babel-plugin-import, 故无法使用全量引入模式语法。参考 ant-design-vue 导出规则,用以下语法引入 InputSearch

import { Input } from 'ant-design-vue'
const AInputSearch = Input.Search