升级Kendo至13.5.0后使用flatten函数遇模块未找到错误求助

问题背景 #

升级Kendo UI for Angular到13.5.0版本后，修改flatten函数的导入路径后触发如下错误：

Error: Module not found: Error: Package path ./filtering/base-filter-cell.component is not exported from package
C:\Users\X\WebstormProjects\X\node_modules\@progress\kendo-angular-grid (see exports field in C:\Users\X\WebstormProjects\X\node_modules\@progress\kendo-angular-grid\package.json)

原导入路径为@progress/kendo-angular-grid/dist/es2015/filtering/base-filter-cell.component，修改为简化路径后触发报错，且确认node_modules中对应文件确实存在flatten函数。环境信息：Angular 16.2.5、Node 18.17.1、Kendo 13.5.0。

原因分析 #

Kendo 13.x版本开始遵循ES模块的exports字段规范，该字段会限制包的可访问路径，仅允许从官方公开的导出入口导入模块。直接访问内部未公开的文件路径（如./filtering/base-filter-cell.component）会被Node.js的模块解析器拦截，即使文件实际存在也无法导入。

解决方法 #

方法1：使用官方公开的API导入（优先推荐） #

检查@progress/kendo-angular-grid的package.json文件中的exports字段，确认是否有包含flatten函数的公开导出模块。例如部分版本中，工具类函数会被导出到@progress/kendo-angular-grid/utils或类似路径：

import { flatten } from '@progress/kendo-angular-grid/utils';

如果官方未公开该函数，则不建议强行依赖内部路径，避免后续版本更新导致兼容性问题。

方法2：自行实现flatten函数 #

flatten函数的核心逻辑是扁平化嵌套数组/树结构，可自行实现一个等价函数替代：

// 在项目的工具类文件中定义
export function flatten<T>(items: T[], childrenKey = 'items'): T[] {
  const result: T[] = [];
  const traverse = (node: T) => {
    result.push(node);
    const children = (node as Record<string, any>)[childrenKey];
    if (Array.isArray(children)) {
      children.forEach(traverse);
    }
  };
  items.forEach(traverse);
  return result;
}

之后在需要的地方导入自己实现的函数即可，完全脱离对Kendo内部API的依赖。

方法3：临时恢复完整dist路径（不推荐） #

若必须使用Kendo原生的flatten函数，可暂时恢复原导入路径，但需注意该路径属于内部实现，后续Kendo版本更新可能会修改结构导致再次报错：

import { flatten } from '@progress/kendo-angular-grid/dist/es2015/filtering/base-filter-cell.component';

内容的提问来源于stack exchange，提问作者GG.White