【问题标题】:React Native error 'Unable to resolve module `react-native` 'React Native 错误'无法解析模块`react-native`'
【发布时间】:2019-02-24 03:38:41
【问题描述】:

我正在尝试学习React Native,所以我继续按照官方文档站点上Getting Started 指南中的所有步骤进行操作。我对React 有一些经验,所以我想扩展它。

大约 6 个月前,我确实涉足了一个简单的“hello world”应用程序,并且在 Android 模拟器和 IoS 模拟器上一切正常。在我的设备上也进行了测试,没有任何问题。由于我忙于其他工作,直到现在我才回到它。

我尝试react-native run-android 命令时遇到的错误:

    Metro Bundler ready.

Loading dependency graph, done.
error: bundling failed: Error: Unable to resolve module `react-native` from `/Users/arunmenon/Sites/reactnative/website/index.js`: Module `react-native` does not exist in the Haste module map or in these directories:
  /Users/arunmenon/Sites/reactnative/website/node_modules

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
    at ModuleResolver.resolveDependency (/Users/arunmenon/Sites/reactnative/website/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:161:1460)
    at ResolutionRequest.resolveDependency (/Users/arunmenon/Sites/reactnative/website/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:91:16)
    at DependencyGraph.resolveDependency (/Users/arunmenon/Sites/reactnative/website/node_modules/metro/src/node-haste/DependencyGraph.js:272:4579)
    at dependencies.map.relativePath (/Users/arunmenon/Sites/reactnative/website/node_modules/metro/src/DeltaBundler/traverseDependencies.js:376:19)
    at Array.map (<anonymous>)
    at resolveDependencies (/Users/arunmenon/Sites/reactnative/website/node_modules/metro/src/DeltaBundler/traverseDependencies.js:374:16)
    at /Users/arunmenon/Sites/reactnative/website/node_modules/metro/src/DeltaBundler/traverseDependencies.js:212:33
    at Generator.next (<anonymous>)
    at step (/Users/arunmenon/Sites/reactnative/website/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:313)
    at /Users/arunmenon/Sites/reactnative/website/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:473
 BUNDLE  [android, dev] ./index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.

我尝试了所有建议的步骤,但问题仍然存在。错误:

Error: Unable to resolve module `react-native` from `/Users/arunmenon/Sites/reactnative/website/index.js`: 
Module `react-native` does not exist in the Haste module map or in these directories:
  /Users/arunmenon/Sites/reactnative/website/node_modules

建议从node_modules 获取路径似乎存在一些问题。 index.js 中的第一行是import { AppRegistry } from 'react-native';,这就是引发错误的地方。

提到的路径是有效的,我确实在路径的 node_modules 目录中安装了 react-native。

我正在 Mac 上开发,目前目标设备是 Android。我将使用react-native CLI 命令路由,而不是create-react-native-app 路由。

我有 Android Studio 3.1.3(昨晚更新)、Node 8.11.2、NPM 6.1.0、Watchman 4.9.0(通过 Homebrew 安装)、Java JDK 1.8.0_144。

我按照 T 的入门指南进行操作。由于我较早开始工作 - 大约 6 个月前 - 我想知道为什么我现在得到这个。我的 Android Studio 版本与那时相同(我昨天更新了 Android Studio 以排除旧版本的问题。我也遇到与新版本相同的错误)当时和现在的区别:

  • React-native 库版本显然已经从那时起提升了
  • Java版本,我最近更新到最新了
  • Node 和 NPM 版本更新
  • 我也认为是 Watchman,因为 Homebrew 确实更新了它

其他一切都是一样的。我也尝试了几个全新安装 - 从头开始​​,即但它没有工作。

我的 package.json:

{
  "name": "website",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.3.1",
    "react-native": "0.55.4"
  },
  "devDependencies": {
    "babel-jest": "23.2.0",
    "babel-preset-react-native": "4.0.0",
    "jest": "23.2.0",
    "react-test-renderer": "16.3.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

【问题讨论】:

    标签: android react-native


    【解决方案1】:

    请从“%appdata%\Temp”中删除所有 react-native 特定文件夹,然后尝试以下命令:

    cd 安卓
    毕业清洁
    cd.. 并删除 node_modules 文件夹
    npm 缓存清理 --force
    npm 安装
    npm start -- --reset-cache
    react-native run-android

    【讨论】:

    • 感谢 cmets。与 Mac 中的临时文件夹等效的是 Library/cache$TMPDIR,如下所述:apple.stackexchange.com/a/131080。第一个位置没有与 react-native 相关的目录,但我在 yarntypescript 目录中发现了一些 react 引用。我删除了这些目录。在 $TMPDIR 结构中没有直接的 react-native 引用。我确实找到了一个hatsmap 参考和一个metro 目录,我已将其删除。我不确定您在cd android 中指的是哪个android 目录。是sdk目录吗?
    • 我也没有可用的gradlew 命令,至少在通过终端/提示使用时是这样。我得到-bash: gradlew: command not found。所有这些都应该在 Android Studio 中完成吗?我不使用 Android Studio 进行开发。我使用 Visual Studio Code 及其内置终端或用于 node/npm 命令的全局可用终端
    • 所有这些命令都是特定于窗口的。您的项目目录中将有 android 文件夹,转到该文件夹​​并打开命令提示符并在那里运行 gradlew clean 命令。就是这样。
    • @arunmenon,是的,您可以使用内置或全局终端来运行这些命令。对于 gradlew 命令,您必须在项目的 android 文件夹中,希望它对您有所帮助。如果有任何问题,请告诉我
    • 我终于成功了。虽然我无法准确指出我采取的几个行动中的哪一个有效 - 我在周末尝试了各种选项 - 需要进入清单的是在不同的目录中尝试新的全新安装。删除项目目录并使用相同的名称重新创建它不起作用。需要一个新的目录名称。一件好事就是我似乎有点nativescript。开发也准备好了。感谢您的回答 - 我接受这是正确的答案,因为答案有有效的步骤。
    【解决方案2】:

    以上在 Mac OSX 上对我不起作用,但这个对我有用:在 npm install 之后,运行这些:

    # Clean cache
    rm -rf $TMPDIR/react-*; rm -rf $TMPDIR/haste-*; rm -rf $TMPDIR/metro-*; watchman watch-del-all
    
    # Start React-Native directly
    react-native start --reset-cache
    
    # Now run android/iOS in another tab
    react-native run-android
    

    原帖:https://github.com/facebook/react-native/issues/21490#issuecomment-427240356

    【讨论】:

    • 好的。该项目目前被搁置,但这似乎是有用的信息。如果我在任何即将到来的 React Native 项目中遇到相同的问题(我计划在不久的将来),我想我会回到这里。
    • 我目前在 React Native 项目中,问题不再出现在我使用的版本中 (0.57.8)。所以这是一个综合因素,包括拥有最新版本的软件包。
    【解决方案3】:

    在我的情况下,问题是新安装的包。所以尝试卸载你新安装的 npm 包。 npm 卸载 --save

    【讨论】:

    • 在我原来的问题中,它是全新安装的。没有添加其他包(除了 React Native 安装的默认包)。但是这个解决方案在存在现有包并且新安装触发问题的用例中绝对有效。毕竟,虽然我绝对认为我最初的问题完全与缓存有关,因为即使删除并重新创建同名的项目也没有效果。
    猜你喜欢
    • 1970-01-01
    • 2019-08-09
    • 2019-07-06
    • 2017-06-06
    • 1970-01-01
    • 1970-01-01
    • 2018-11-18
    • 2017-10-11
    • 2016-03-23
    相关资源
    最近更新 更多