React Native自定义包react-native-webview依赖配置及报错求助

问题背景 #

开发依赖react-native-webview的React Native自定义包rn-timer时，本地测试遇到依赖配置相关报错，多次调整配置仍未解决，需要正确的依赖配置方案。

初始配置与报错 #

自定义包rn-timer初始package.json配置 #

{
  "peerDependencies": {
    "react": "*",
    "react-native": "*"
  },
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@babel/preset-env": "^7.19.3",
    "@babel/runtime": "^7.19.0",
    "react": "^18.1.0",
    "react-native": "^0.70.1"
  },
  "dependencies": {
    "react-native-webview": "^11.23.1"
  }
}

测试应用demoapp2初始package.json配置 #

{
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@babel/preset-env": "^7.1.6",
    "@babel/runtime": "^7.19.0",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.32.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.72.1",
    "react-test-renderer": "18.1.0"
  },
  "jest": {
    "preset": "react-native"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-native": "^0.70.1",
    "rn-timer": "file:../rn-timer"
  }
}

初始报错信息 #

ERROR  TypeError: Cannot read property 'isFileUploadSupported' of null, js engine: hermes 
    at App (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.demoapp2&modulesOnly=false&runModule=true:112639:89)
    at RCTView
    at View
    at RCTView
    at View
    at AppContainer (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.demoapp2&modulesOnly=false&runModule=true:102788:36)
    at demoapp2(RootComponent) (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.demoapp2&modulesOnly=false&runModule=true:108308:28)
 ERROR  Error: Requiring module "../rn-timer/index.js", which threw an exception: TypeError: Cannot read property 'isFileUploadSupported' of null, js engine: hermes 
    at App (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.demoapp2&modulesOnly=false&runModule=true:112639:89)
    at RCTView
    at View
    at RCTView
    at View
    at AppContainer (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.demoapp2&modulesOnly=false&runModule=true:102788:36)
    at demoapp2(RootComponent) (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.demoapp2&modulesOnly=false&runModule=true:108308:28)
 ERROR  TypeError: Cannot read property 'CountdownTimer' of undefined

This error is located at:
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in demoapp2(RootComponent), js engine: hermes
 ERROR  TypeError: Cannot read property 'CountdownTimer' of undefined

This error is located at:
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in demoapp2(RootComponent), js engine: hermes
 WARN  Tried to call timer with ID 8 but no such timer exists.

调整后配置与新报错 #

调整后rn-timer的package.json #

{
  "name": "rn-timer",
  "version": "1.0.0",
  "description": "this is my timer component",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "timer",
    "countdown"
  ],
  "author": "shivang",
  "license": "MIT",
  "peerDependencies": {
    "react": "^18.2.0",
    "react-native": "^0.70.1",
    "react-native-webview": "^11.23.1"
  },
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@babel/preset-env": "^7.19.3",
    "@babel/runtime": "^7.19.0",
    "react": "^18.2.0",
    "react-native": "^0.70.1"
  }
}

调整后demoapp2的package.json #

{
  "name": "demoapp2",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@babel/preset-env": "^7.1.6",
    "@babel/runtime": "^7.19.0",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.32.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.72.1",
    "react-test-renderer": "18.1.0"
  },
  "jest": {
    "preset": "react-native"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-native": "^0.70.1",
    "react-native-webview": "^11.23.1",
    "rn-timer": "file:../rn-timer"
  }
}

新报错信息 #

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

解决方案 #

1. 正确配置依赖关系 #

对于React Native自定义包，依赖的原生模块（如react-native-webview）需配置为peerDependencies，同时在自定义包的devDependencies中添加该模块用于本地开发测试，确保主应用和自定义包使用同一版本的依赖，避免多副本问题。

最终rn-timer的package.json配置

{
  "name": "rn-timer",
  "version": "1.0.0",
  "description": "this is my timer component",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "timer",
    "countdown"
  ],
  "author": "shivang",
  "license": "MIT",
  "peerDependencies": {
    "react": "^18.2.0",
    "react-native": "^0.70.1",
    "react-native-webview": "^11.23.1"
  },
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@babel/preset-env": "^7.19.3",
    "@babel/runtime": "^7.19.0",
    "react": "^18.2.0",
    "react-native": "^0.70.1",
    "react-native-webview": "^11.23.1"
  }
}

测试应用demoapp2的配置保持不变，确保react-native-webview在dependencies中，版本与自定义包的peerDependencies一致。

2. 解决React多副本问题 #

本地测试时，自定义包可能加载自身node_modules中的React，导致版本不一致引发Hook错误，执行以下步骤修复：

• 在rn-timer根目录执行：

  rm -rf node_modules
  rm package-lock.json
  npm install
  

• 在demoapp2根目录执行：

  rm -rf node_modules
  rm package-lock.json
  npm install
  

• 若问题仍存在，在测试应用的metro.config.js中添加解析配置，强制使用主应用的依赖：

  const path = require('path');
  
  module.exports = {
    resolver: {
      extraNodeModules: {
        'react': path.resolve(__dirname, './node_modules/react'),
        'react-native': path.resolve(__dirname, './node_modules/react-native'),
        'react-native-webview': path.resolve(__dirname, './node_modules/react-native-webview')
      }
    }
  };
  

3. 验证原生模块链接 #

确保原生模块正确链接（React Native 0.60+自动链接，手动执行一次更稳妥）：

cd demoapp2
npx react-native link react-native-webview

重新运行应用：

npx react-native run-android

4. 检查组件代码 #

确保rn-timer中的Hook调用符合规则：

• 不在循环、条件判断或嵌套函数中调用Hook
• 组件为函数组件或自定义Hook
• 不在类组件中使用Hook

内容的提问来源于stack exchange，提问作者Matrix