Couldn't load JSBundle from bundle/cp/ hotel.harmony.bundle

这是一个React Native在鸿蒙平台上加载JS Bundle时遇到的典型错误。让我为你详细解析这个问题。

错误根源分析

这个错误表明系统无法从指定路径bundle/cp/hotel.harmony.bundle加载JavaScript Bundle文件。主要问题出现在‌资源路径配置‌和‌Bundle文件生成‌两个关键环节。

具体原因解析

1. 文件路径配置错误

路径不存在‌：bundle/cp/hotel.harmony.bundle文件可能不存在于项目中
目录结构不匹配‌：实际文件可能存储在其他位置
文件名大小写不一致‌：鸿蒙系统对文件路径大小写敏感

2. Bundle文件生成问题

在React Native for OpenHarmony中，Bundle文件需要通过特定命令生成：

npm run bundle-harmony

这个命令会在harmony/entry/src/main/resources/rawfile/目录下生成bundle.harmony.js文件。

3. 开发环境配置问题

Metro服务器未启动‌：开发时需要运行Metro服务
构建过程失败‌：Bundle文件生成过程中出现错误
资源管理器初始化问题‌：ResourceJSBundleProvider未能正确获取资源

完整解决方案

步骤1：验证文件路径和存在性

首先检查你的项目结构中是否存在该文件：

项目根目录/
├── bundle/
│   └── cp/
│       └── hotel.harmony.bundle

如果文件不存在，需要重新生成Bundle文件。

步骤2. 正确的Bundle生成方式

方式一：本地资源加载（推荐生产环境）‌

将生成的Bundle文件放置在正确位置：

// 正确示例
new ResourceJSBundleProvider(
  getContext().resourceManager, 
  'bundle.harmony.js'  // 或 'hermes_bundle.hbc'
)

方式二：Metro服务加载（开发环境）‌

new MetroJSBundleProvider()  // 开发时使用Metro热加载:ml-citation{ref="1" data="citationList"}

步骤3：检查ResourceJSBundleProvider配置

确保在代码中正确配置了Bundle提供器：

// 在aboutToAppear()或组件初始化时调用
RNInstanceManager.prepareRN('Hotel', 
  new ResourceJSBundleProvider(
    getContext().resourceManager,
    'bundle.harmony.js'  // 注意路径正确性
  )
)

npm run bundle-harmony

---

RNOH在React Native新架构基础上进行了鸿蒙化适配：

• JavaScript层‌：业务逻辑和React组件
• JSI通信层‌：JavaScript与C++直接通信
• OpenHarmony适配代码‌：对接ArkUI原生组件
• OS层‌：系统底层功能调用
• Bundle加载机制

当调用ResourceJSBundleProvider时，系统会：

• 通过resourceManager访问应用资源
• 从指定路径读取JS Bundle文件
• 将Bundle内容提供给React Native运行时
• 执行JavaScript代码并渲染界面

建议‌：立即检查你的项目harmony/entry/src/main/resources/rawfile/目录下是否存在bundle.harmony.js文件，如果不存在，请运行npm run dev重新生成Bundle文件，然后确保代码中的路径与实际文件位置完全匹配。

---

解决方案：

以下为package.json打包相关的命令：

{
  "name": "FlightRN",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start --reset-cache",
    "test": "jest",
    "dev": "react-native bundle-harmony --dev false --bundle-output ../NativeProject/entry/src/main/resources/rawfile/bundle.harmony.js",
    "dev:basic": "react-native bundle-harmony --dev false --entry-file ./bundles/basic.js --bundle-output ../NativeProject/entry/src/main/resources/rawfile/bundle/basic/basic.harmony.bundle --assets-dest ../NativeProject/entry/src/main/resources/rawfile/assets --config ./basic.config.js",
    "dev:flight": "react-native bundle-harmony --dev false --entry-file ./bundles/flight.js --bundle-output ../NativeProject/entry/src/main/resources/rawfile/bundle/cp/flight.harmony.bundle --assets-dest ../NativeProject/entry/src/main/resources/rawfile/assets --config ./flight.config.js",
    "dev:all": "npm run dev:basic && npm run dev:flight"
  },
  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.72.5"
  },
  "devDependencies": {
    "crypto-js": "^4.2.0",
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.11",
    "@tsconfig/react-native": "^3.0.0",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.76.8",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },
  "engines": {
    "node": ">=16"
  }
}

flight.config.js：

/**
 * Copyright (c) 2024 Huawei Technologies Co., Ltd.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE-MIT file in the root directory of this source tree.
 */

const path = require('path');
const { mergeConfig, getDefaultConfig } = require('@react-native/metro-config');
const { createHarmonyMetroConfig } = require('@react-native-oh/react-native-harmony/metro.config');
const moduleId = require('./build/moduleId');

const projectRootPath = path.join(__dirname);

const config = {
  serializer: {
    createModuleIdFactory: moduleId.createModuleIdFactoryWrap(
      projectRootPath,
      'flight',
    ),
    processModuleFilter: moduleId.postProcessModulesFilterWrap(
      projectRootPath,
    ),
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), createHarmonyMetroConfig({
  reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
}), config);

接下来通过打包命令npn run all将reactNative的代码打包成为bundle，这样可以进行在开源鸿蒙OpenHarmony中进行使用。

最终实现效果是：