HarmonyOS 鸿蒙Next 媒体查询提示在导入模块时找不到对应的导出

HarmonyOS 鸿蒙Next 媒体查询提示在导入模块时找不到对应的导出 我在使用开发文档提供的代码 开发文档对应地址 就是这个地址，使用了这个代码，提示了这么一个错误，大致内容是显示在导入模块时找不到名为’BreakpointState’的导出，这个是详细错误信息：

Error message:the requested module '@normalized:N&&common&&common/src/main/ets/utils/BreakPointSystem&' does not provide an export name 'BreakpointState' which imported by '&default/src/main/ets/pages/Page02_GuidePage&'
Stacktrace:
Cannot get SourceMap info, dump raw stack:
#01 pc 00000000007820b7 /system/lib64/platformsdk/libark_jsruntime.so(d1607e76495a62e1af8da67b7cc38811)
#02 pc 00000000003606bc /system/lib64/platformsdk/libark_jsruntime.so(d1607e76495a62e1af8da67b7cc38811)
#03 pc 00000000001e3378 /system/lib64/platformsdk/libark_jsruntime.so(d1607e76495a62e1af8da67b7cc38811)
#04 pc 00000000001e2bd1 /system/lib64/platformsdk/libark_jsruntime.so(d1607e76495a62e1af8da67b7cc38811)
#05 pc 000000000027cc21 /system/lib64/platformsdk/libark_jsruntime.so(d1607e76495a62e1af8da67b7cc38811)
#06 pc 0000000000658b25 /system/lib64/platformsdk/libark_jsruntime.so(d1607e76495a62e1af8da67b7cc38811)
#07 pc 000000000065520e /system/lib64/platformsdk/libark_jsruntime.so(d1607e76495a62e1af8da67b7cc38811)
#08 pc 00000000005c4128 /system/lib64/platformsdk/libark_jsruntime.so(d1607e76495a62e1af8da67b7cc38811)
#09 pc 00000000005c3145 /system/lib64/platformsdk/libark_jsruntime.so(d1607e76495a62e1af8da67b7cc38811)
#10 pc 00000000005c2ba1 /system/lib64/platformsdk/libark_jsruntime.so(d1607e76495a62e1af8da67b7cc38811)
#11 pc 000000000048bc96 /system/lib64/platformsdk/libark_jsruntime.so(d1607e76495a62e1af8da67b7cc38811)
#12 pc 000000000048cc7b /system/lib64/platformsdk/libark_jsruntime.so(d1607e76495a62e1af8da67b7cc38811)
#13 pc 000000000063d789 /system/lib64/platformsdk/libark_jsruntime.so(d1607e76495a62e1af8da67b7cc38811)
#14 pc 0000000002ca49f0 /system/lib64/platformsdk/libace_compatible.z.so(074b7d2cf9c8836ae12b13ac14b16e67)
#15 pc 0000000002b795fa /system/lib64/platformsdk/libace_compatible.z.so(074b7d2cf9c8836ae12b13ac14b16e67)

但是我是直接复制粘贴的文档内的文件，我也在common的index文件中已经将BreakpointState暴露出来了的（他的文件中我唯一修改的部分，他的文件名字是breakpointsystem.ets，我的文件名字是BreakPointSystem.ets，并且他的文件中类名BreakpointSystem我把它改成了BreakPointSystem。就只改动了这两个地方）

这是我的common/index文件：

export { add } from './src/main/ets/utils/Calc'
export { EmptyView } from './src/main/ets/components/EmptyView'
export { BreakPointSystem } from './src/main/ets/utils/BreakPointSystem'
export { BreakpointState } from './src/main/ets/utils/BreakPointSystem'
export { BreakPointConstants } from './src/main/ets/constants/BreakPointConstants'

这是我的页面代码（与文档相同的部分，我已经标注）：

//引导页
import { BasicConstants } from '../Constants/BasicConstants'
//响应式适配
import { BreakpointState, BreakPointSystem } from 'common/src/main/ets/utils/BreakPointSystem'

import { router } from '@kit.ArkUI';
import { LoginPanel } from '@hms.core.account.LoginComponent';

@Entry
@Component
struct Page02_GuidePage {
  @State message: string = 'Hello World1';
  @State time: number = 3;
  private timer: number = 0;
  @State flag: number = 1

  /**
   * 与文档相同
   */
  @State compStr: BreakpointState<string> = BreakpointState.of({ sm: "sm", md: "md", lg: "lg" })
  @State compImg: BreakpointState<Resource> = BreakpointState.of({
    sm: $r('app.media.startIcon'),
    md: $r('app.media.layered_image'),
    lg: $r('app.media.background')
  });

  /**
   *   end
   */

  //三秒跳到主页
  aboutToAppear(): void {
    /**
     * 与文档相同
     */
    BreakPointSystem.getInstance().attach(this.compStr)
    BreakPointSystem.getInstance().attach(this.compImg)
    BreakPointSystem.getInstance().start()
    /**
     *   end
     */

    /**
     * 定时器
     */
    this.timer = setInterval(() => {
      this.time--
      if (this.time == 0) { //三秒之后跳到主页中去
        /**
         * router.replaceUrl({
         *   url:"pages/Index"
         * })
         */
      }
    }, 1000) //这个和上面的哪个3000-含义不懂，这里的这个1000表示，每隔一秒钟，执行一次this.time--，上面的3000指的是倒计时3秒

  }

  aboutToDisappear(): void {
    /**
     * 与文档相同  start
     */
    BreakPointSystem.getInstance().detach(this.compStr)
    BreakPointSystem.getInstance().detach(this.compImg)
    BreakPointSystem.getInstance().stop()
    /**
     *   end
     */
  }
  build() {

    Stack({ alignContent: Alignment.TopEnd }) {
      Text(`倒计时：${this.time}`)
        .fontColor(Color.Black)
        .fontSize(14)
        .margin({
          top: 20,
          right: 30
        })
        .backgroundColor("#ffdddddd")
        .padding({
          top: 5,
          bottom: 5,
          right: 10,
          left: 10
        })
        .borderRadius(20)
      Text(this.compStr.value)
        .fontSize(24)
        .margin(10)

      Flex({
        direction: FlexDirection.Column, //direction:FlexDirection.RowReverse排序的主轴方向是水平反方向
        alignItems: ItemAlign.Center //交叉轴的排序方式。主轴是横轴，交叉轴就是竖轴
      }) {

        //存放logo
        Column() {
        Image($r("app.media.woniulogo"))
          .width(100 * this.flag)
          .objectFit(ImageFit.Contain)
          .borderRadius(20)
          .backgroundColor("#ffe2e2d8")
        }

        .justifyContent(FlexAlign.Center)
        .alignItems(HorizontalAlign.Center)
          .flexGrow(1)

        Image($r("app.media.woniulogo2"))
          .height(27 * this.flag)
          .width(114 * this.flag)
        Text("WoNiuMall超市")
          .fontColor('#66000000')
          .fontSize(20 * this.flag)
          .letterSpacing(10)//控制字母之间的间距
          .margin({
            top: 12,
            bottom: 136
          })

      }
      .height(BasicConstants.FULL_HEIGHT)
      .width(BasicConstants.FULL_WIDTH)

      /**
       * .backgroundColor(Color.Gray)
       */
    }
  }
}

麻烦大佬帮我看一下这个是怎么回事呀？