Unable to resolve module missing-asset-registry-path from XXX

问题：

在我将老项目（0.67.0）升级到项目（0.74.1）时打包报错

bash 复制代码

PS D:\tiro\iDealLedRN> npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/assets/
warn Package react-native-sqlite-storage contains invalid configuration: "dependency.platforms.ios.project" is not allowed. Please verify it's properly linked using "npx react-native config" command and contact the package maintainers about this.
warn =================================================================================================
warn From React Native 0.73, your project's Metro config should extend '@react-native/metro-config'
warn or it will fail to build. Please copy the template at:
warn https://github.com/facebook/react-native/blob/main/packages/react-native/template/metro.config.js
warn This warning will be removed in future (https://github.com/facebook/metro/issues/1018).
warn =================================================================================================
                Welcome to Metro v0.80.9
              Fast - Scalable - Integrated


error Unable to resolve module missing-asset-registry-path from D:\tiro\iDealLedRN\res\arrow.png: missing-asset-registry-path could not be found within the project or in these directories:
  node_modules
> 1 | �PNG
  2 | 
  3 |
  4 | IHDR�<q�sRGB���IDATx^�ݹ�UE�#BB$�        OA.
Error: Unable to resolve module missing-asset-registry-path from D:\tiro\iDealLedRN\res\arrow.png: missing-asset-registry-path could not be found within the project or in these directories:
  node_modules
> 1 | �PNG
  2 | 
  3 |
  4 | IHDR�<q�sRGB���IDATx^�ݹ�UE�#BB$�        OA
    at ModuleResolver.resolveDependency (D:\tiro\iDealLedRN\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:138:15)
    at DependencyGraph.resolveDependency (D:\tiro\iDealLedRN\node_modules\metro\src\node-haste\DependencyGraph.js:231:43)
    at D:\tiro\iDealLedRN\node_modules\metro\src\lib\transformHelpers.js:156:21
    at resolveDependencies (D:\tiro\iDealLedRN\node_modules\metro\src\DeltaBundler\buildSubgraph.js:42:25)
    at visit (D:\tiro\iDealLedRN\node_modules\metro\src\DeltaBundler\buildSubgraph.js:83:30)
    at async Promise.all (index 0)
    at async visit (D:\tiro\iDealLedRN\node_modules\metro\src\DeltaBundler\buildSubgraph.js:92:5)
    at async Promise.all (index 3)
    at async visit (D:\tiro\iDealLedRN\node_modules\metro\src\DeltaBundler\buildSubgraph.js:92:5)
    at async Promise.all (index 3)
info Run CLI with --verbose flag for more details.

其实这里早有提示

bash 复制代码

warn From React Native 0.73, your project's Metro config should extend '@react-native/metro-config'
warn or it will fail to build. Please copy the template at:
warn https://github.com/facebook/react-native/blob/main/packages/react-native/template/metro.config.js
warn This warning will be removed in future (https://github.com/facebook/metro/issues/1018).

从React Native 0.73开始，您项目的Metro配置应该扩展"@react-native/metro-config" 警告否则它将无法构建。

解决：

更改根目录metro.config.js内容使其扩展"@react-native/metro-config"

javascript 复制代码

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

拓展：

比如通过metro进行的JS Bundle拆包 https://www.jianshu.com/p/18d6ed19ff10 配置metro.common.config.js 和 metro.business.config.js 也需要扩展"@react-native/metro-config"

metro.common.config.js

javascript 复制代码

// const fs = require('fs');
// const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

// function getModuleId(path) {
//   // 根据文件的相对路径构建 moduleId
//   const projectRootPath = __dirname;
//   let moduleId = path.substr(projectRootPath.length + 1);
//   return moduleId;
// }

// function createModuleIdFactory() {
//   return getModuleId;
// }

// function processModuleFilter(module) {
//   const moduleId = getModuleId(module['path']);
//   // 把 moduleId 写入 moduleIdList.txt 文件，记录基础模块的 moduleId
//   fs.appendFileSync('./moduleIdList.txt', `${moduleId}\n`);
//   return true;
// }

// const config = {
//   serializer: {
//     createModuleIdFactory,
//     processModuleFilter,
//   },
// };

// module.exports = mergeConfig(getDefaultConfig(__dirname), config);


const fs = require('fs');
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

function getModuleId(path) {
  // 根据文件的相对路径构建 moduleId
  const projectRootPath = __dirname;
  let moduleId = path.substr(projectRootPath.length + 1);
  return moduleId;
}

function createModuleIdFactory() {
  return getModuleId;
}

function processModuleFilter(module) {
  const moduleId = getModuleId(module['path']);
  // 把 moduleId 写入 moduleIdList.txt 文件，记录基础模块的 moduleId
  fs.appendFileSync('./moduleIdList.txt', `${moduleId}\n`);
  return true;
}

const config = {
  serializer: {
    createModuleIdFactory,
    processModuleFilter,
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

metro.business.config.js

javascript 复制代码

// const fs = require('fs');

// // 读取 moduleIdList.txt，转换为数组
// const moduleIdList = fs.readFileSync('./moduleIdList.txt', 'utf8').toString().split('\n');

// function getModuleId(path) {
//     // 根据文件的相对路径构建 moduleId
//     const projectRootPath = __dirname;
//     let moduleId = path.substr(projectRootPath.length + 1);
//     return moduleId;
// }

// function createModuleIdFactory() {
//     return getModuleId
// }

// function processModuleFilter(module) {
//     //const modulePath = getProjectPath(module['path'])
//     const moduleId = getModuleId(module['path'])
//     if (moduleIdList.indexOf(moduleId) >= 0) {
//         // 过滤掉上一步记录的基础模块的moduleId
//         return false;
//     }
//     return true;
// }

// module.exports = {
//     serializer: {
//         createModuleIdFactory,
//         processModuleFilter,
//     }
// };

const fs = require('fs');
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

// 读取 moduleIdList.txt，转换为数组
const moduleIdList = fs.readFileSync('./moduleIdList.txt', 'utf8').toString().split('\n');

function getModuleId(path) {
    // 根据文件的相对路径构建 moduleId
    const projectRootPath = __dirname;
    let moduleId = path.substr(projectRootPath.length + 1);
    return moduleId;
}

function createModuleIdFactory() {
    return getModuleId;
}

function processModuleFilter(module) {
    //const modulePath = getProjectPath(module['path'])
    const moduleId = getModuleId(module['path']);
    if (moduleIdList.indexOf(moduleId) >= 0) {
        // 过滤掉上一步记录的基础模块的 moduleId
        return false;
    }
    return true;
}

const config = {
    serializer: {
        createModuleIdFactory,
        processModuleFilter,
    }
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);