HarmonyOS鸿蒙Next中HMRouter的组件中使用lazy import编译报错Module '"..XXX"' has no exported member 'from'. At File:

HarmonyOS鸿蒙Next中HMRouter的组件中使用lazy import编译报错Module ‘"…XXX"’ has no exported member ‘from’. At File: 项目中使用了HMrouter ，做优化时给自定义组件的import 加了lazy ，编译报错，

去掉lazy可以正常编译，

环境问题不能截图，是否有人知道原因

6 回复

感谢您的提问，能否提供相关demo

根据描述写了以下场景均未复现，默认导出和分别导出、导出带注解的Component：

import { HMDefaultGlobalAnimator, HMNavigation, HMRouter, HMRouterMgr } from "@hadss/hmrouter";
import { AttributeUpdater } from "@kit.ArkUI";
import lazy { ComponentA } from "../component/ComponentA";
import lazy ComponentB from "../component/ComponentB";
import lazy { PageC } from "../component/ComponentC";

@Entry
@Component
struct Index {
  modifier: MyNavModifier = new MyNavModifier();
  
  build() {
    // @Entry中需要再套一层容器组件,Column或者Stack
    Column(){
      // 使用HMNavigation容器
      HMNavigation({
        navigationId: 'MainNavigation', homePageUrl: 'HomePage',
        options: {
          standardAnimator: HMDefaultGlobalAnimator.STANDARD_ANIMATOR,
          dialogAnimator: HMDefaultGlobalAnimator.DIALOG_ANIMATOR,
          modifier: this.modifier
        }
      })
    }
    .height('100%')
    .width('100%')
  }
}

class MyNavModifier extends AttributeUpdater<NavigationAttribute> {
  initializeModifier(instance: NavigationAttribute): void {
    instance.hideNavBar(true);
  }
}

@HMRouter({ pageUrl: 'HomePage' })
@Component
export struct HomePage {
  build() {
    Column() {
      Button('Push C')
        .onClick(() => {
          HMRouterMgr.push({ pageUrl: 'PageC' })
        })
      ComponentA()
      ComponentB()
      PageC()
    }
  }
}

// ComponentC.ets
import { HMRouter, HMRouterMgr } from "@hadss/hmrouter"

@HMRouter({ pageUrl: 'PageC' })
@Component
export struct PageC {
  build() {
    Column() {
      Button('Push HomePage')
        .onClick(() => {
          HMRouterMgr.push({ pageUrl: 'HomePage' })
        })
    }
  }
}

关于组件的懒加载可以尝试：通过If条件判断延迟创建，或者使用组件动态创建解决页面、组件加载缓慢的问题。

更多关于HarmonyOS鸿蒙Next中HMRouter的组件中使用lazy import编译报错Module '"..XXX"' has no exported member 'from'. At File:的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


1.我尝试了一下使用lazy的导出方式复现了楼主的操作

复现错误：

ERROR: 10505001 ArkTS Compiler Error
Error Message: Module '"../pages/L****Page"' has no exported member 'from'. At File: C:/Users/admin/DevEcoStudioProjects****/generated/HMfrom-1974194127.ets:1:10

错误代码位置：

import lazy { HMPopInfo, HMRouter } from '@hadss/hmrouter';

2.解决方案

我理解的是HMPopInfo, HMRouter这两个导入的东西是要在静态编译的时候就需要使用到的，因为HMRouter在编译的时候会生成相应的Navigation路径更具模版生成页面，而HMRouter就是脚本需要的装饰器，使用了；lazy的当时导出导致在静态编译阶段找不到相应的信息，从而编译错误。

使用lazy的时候通常是页面、@Component UI 组件，开发者可以精准定位启动阶段不必预先加载的文件列表，并在这些文件的调用点增加lazy标识

3.参考文档

延迟加载（lazy import）-ArkTS模块化-ArkTS运行时-ArkTS（方舟编程语言）-应用框架 - 华为HarmonyOS开发者

如果底部是三个tabs，但是首屏只展示第一个tab，预期逻辑是给第二个和第三个组件的import加上lazy ，如果不适用lazy的话，会加载第二个第三个组件，包括它内部的导包，都会占用冷启动时间，目前看这个问题只有使用了@HMRouter({ pageUrl: ‘XXX’ })这个装饰器的页面才会编译失败，其他的子组件可以正常使用lazy。

可能原因

  1. 导出声明不匹配
    错误信息has no exported member 'from'表明模块中未正确导出名为’from’的成员。常见于：

    • 导出时未使用export关键字显式暴露成员
    • 导出名称与导入名称大小写不一致（如导出From但导入from）

  2. 懒加载语法误用
    鸿蒙支持动态导入（Dynamic Import）而非直接使用lazy修饰符。错误通常源于语法格式不符合规范。

ArkTS/HarmonyOS中正确的懒加载语法需要严格遵循ES模块规范：

// 正确写法（箭头函数返回Promise）
const HomePage = lazy(() => import('../pages/HomePage'));

必须通过() => import()形式封装动态导入

缺少箭头函数会导致编译器无法识别模块加载方式

在HarmonyOS鸿蒙Next中使用HMRouter时，lazy import报错"Module has no exported member ‘from’"通常由以下原因导致：

  1. 导入路径或导出名错误：检查目标模块是否正确定义并导出相应成员
  2. TypeScript配置问题：确保tsconfig.json中moduleResolution设置为"node"
  3. 模块声明缺失：确认被导入模块存在完整的类型声明文件
  4. 构建工具兼容性：验证HMRouter版本与当前HarmonyOS SDK的兼容性

检查导入语句格式应为：

const Module = lazy(() => import('./Module'));

确保import路径准确且目标模块使用export正确定义成员。

回到顶部