无法解析 React Native 应用程序中的模块答案

【问题标题】：Unable to Resolve Module in React Native App无法解析 React Native 应用程序中的模块
【发布时间】：2017-04-20 11:34:06
【问题描述】：

我在 React Native 中收到一个错误，说它无法解析模块。这是说某个文件夹不存在但路径不准确。它告诉我Directory /Users/user/Desktop/RNApp/app/app/containers 不存在。不过，我不知道第二个应用程序是从哪里来的。我的目录是这样的

这就是我在app/containers/index.js 中导出容器组件的方式

export RNAppNavigator from './Navigator/RNAppNavigator'
export SplashContainer from './Splash/SplashContainer'
export AppContainer from './App/AppContainer'

所以我应该能够像import {AppContainer} from '~/containers 一样导入它们，对吗？我没有遇到任何其他组件的问题。只是AppContainer。

谢谢！

【问题讨论】：

曾经我创建了一个名为Index.js 的文件，但导入了index.js。你好，我的老朋友，Case-sensitive-imports。

标签： react-native

【解决方案1】：

react-native start --reset-cache 解决了这个问题。 https://github.com/facebook/react-native/issues/1924

【讨论】：

这会抛出 - 错误 Metro Bundler 无法在端口 8081 上侦听
也许你的模拟器一直开着

【解决方案2】：

如果您在纯组件或类方面遇到类似问题，请确保您使用的是 .js 扩展而不是 .jsx。

【讨论】：

我什至不会使用我的组件，因为我使用的是.jsx，这是否意味着 React Native 不支持 jsx 文件？
是的，我相信 React native 不支持 JSX 文件。
澄清一下，我使用的是 Expo，我认为是 Expo 不支持 .jsx 文件，不过我不知道纯原生方法。
@GilbertR.，我用纯 React Native 构建了一个应用程序，它也不支持 .jsx 文件。你可以查看here
我在 expo 中有 TSX 和 jsx，后来我退出了，除了 jsx 中的一个自定义导入（在 expo 中工作）之外，所有东西都与 jsx 和 tsx 扩展一起工作，停止在裸流程中工作，感谢您的回答，我重命名了文件并像魅力一样工作

【解决方案3】：

我对这个错误失去了生存的意愿，RN 告诉我导入的文件 ./Foo 不存在，而它就在那里！

实际的潜在错误不是拼写错误，而实际上是在./Foo 导入的另一个文件中。

小心。如果你在任何地方写JSX（例如./Bar）：

<Bar>...</Bar>

那么你必须有：

import * as React from 'react'（或类似）

存在于该文件中 (./Bar)。

当语法糖（尖括号）被转译时，它会天真地吐出如下内容：

React.createComponent(...)

如果React 没有明确被导入，这个引用将是无效的，所以这个依赖文件的评估随后会失败。

不幸的是，结果是 ./Foo（以及 ./Bar）在您的应用中将不可用，因此 RN 会说出诸如 module not found 和 Indeed, none of these files exist 之类的无用的话。

希望对您有所帮助。

ps。如果文件之间存在循环依赖关系，您也可能会遇到类似的痛苦！真有趣！

【讨论】：

【解决方案4】：

根据您的文件夹结构，尝试在 index.js 中像这样导入：

import { AppContainer } from './App/AppContainer';

如果您使用的是命名导出，那就是：

export class AppContainer [...]

如果您使用的是默认导出，例如：

export default class AppContainer [...]

对象解构将失败。你必须这样做：

import AppContainer from './App/AppContainer';

【讨论】：

好的。我回家后试试看。我隐约记得不久前遇到过类似的事情。我会试一试。谢谢！
不幸的是，这不起作用。它只是给了我另一个错误。这一次虽然它说一个实际存在的目录不存在哈哈。显然是在说Directory /Users/user/Desktop/RNApp/app/App/AppContainer doesn't exist。我完全被难住了。
@staxwell 您实际在哪个文件中导入 AppContainer？既然你说导出是在 app/containers/index.js 中完成的。
导出在app/containers/index.js完成，导入在app/index.js完成
@staxwell 哦，你可以试试这个：import { AppContainer } from './containers/index';

【解决方案5】：

对我来说，使用 expo，我只需要重新启动 expo。 ctrl + c 和 yarn start 或 expo start 以及在 ios 模拟器或您的设备上运行，无论您使用哪个进行测试。

【讨论】：

【解决方案6】：

硬件 -> 删除所有内容和设置为我完成了这项工作（其他事情没有）。

【讨论】：

【解决方案7】：

确保模块在 package.json 中定义，使用npm install，然后尝试react-native link

【讨论】：

React-native 从 0.60 版本开始自动链接。

【解决方案8】：

如果您的文件路径正确，则检查任何一个文件包含

import React from './node_modules/react';

替换为

import React, { Component } from 'react';

【讨论】：

【解决方案9】：

我也遇到了同样的问题，现在解决了。如果您遇到纯组件或类的问题，请确保您使用的是 .js 扩展名而不是 .jsx。

【讨论】：

【解决方案10】：

使用它对我有用npm cache add <package name><@version>。

例子：

npm cache add react-native-paper@0.1.9

【讨论】：

【解决方案11】：

我能够通过添加文件扩展名“.js”来解决此问题。我正在使用 Intellij 并创建了一个 js 文件，但它没有文件扩展名。当我进行折射器重命名并将我的组件从“List”更改为“List.js”时，react native 就知道如何解决它。

【讨论】：

【解决方案12】：

这是我的项目目录结构

我像这样使用导入

它正在工作不要忘记在斜杠前添加点例如'./src/container/home/profile/index'

【讨论】：

【解决方案13】：

重新加载应用程序，此错误的原因是在 react-native 依赖项中所做的文件位置更改，其他库（如 native-base 指向）。

要解决它，您需要查看提到的文件并将文件位置更改为正确的位置。

【讨论】：

【解决方案14】：

删除节点文件夹并重新启动对我有用（重新启动后运行 npm install）

【讨论】：

【解决方案15】：

在我的情况下，我需要使用扩展文件路径导入

即：

错误：import MyComponent from "componentFolder/myComponent";

右：import MyComponent from "../myAppFolder/componentFolder/myComponent";

这两个都没有显示 Typescript 错误，但只有底部的一个有效。

【讨论】：

【解决方案16】：

如果您最近在 git 中更改了名称，仅包括更改文件的大小写。 MacOS 将忽略更改。因此，您必须转到控制台中的文件并更改名称。例如，如果名称更改为 menu.js -> Menu.js 在拉取后使用终端进行手动重命名。

mv menu.js Menu.js

【讨论】：

【解决方案17】：

我正在使用 react-native CLI，我只是重新启动 rn-cli，ctrl+c 以停止该进程，然后 npx react-native start

【讨论】：

【解决方案18】：

看起来您的错误来自外部 index.js 文件，而不是这个。您是否将这个导入为'./app/containers'？因为它应该只是'./containers'。

【讨论】：

在我的 /app/index.js 文件中，我 import {AppContainer} from '~/containers。当我尝试./containers 时，我收到另一个错误，说另一个目录在其他地方不存在。
当我尝试时它说它无法解析模块./containers。
那么不确定，在 AppContainer 中您正在执行默认导出，而不仅仅是导出对吗？除此之外，尝试在 xcode 上重建您的应用程序，看看错误是否消失。
是的，我已经尝试过重建。嗯。我会弄清楚的，我会让你知道我发现了什么。再次感谢！！
np，你能发布你的 app/index.js 的 ss 吗？

【解决方案19】：

我遇到了这个错误，然后我意识到我的 package.json 文件大部分是空的。确保首先拥有所有依赖项。

使用yarn add DEPENDENCY_NAME添加依赖。

【讨论】：

【解决方案20】：

Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-*
react-native start --reset-cache

【讨论】：

嗨！尝试为您的解决方案添加更多解释
我收到zsh: no matches found: /tmp/metro-bundler-cache-* 有变化吗？

【解决方案21】：

在本机反应中，.jsx 与 .js 是不同的文件。这就是我收到此错误的原因。当我需要将文件命名为 Comp.js 时，我试图导入 Comp.jsx。

【讨论】：

【解决方案22】：

我遇到了完全相同的问题 — 修复是 babel-preset-react-native-stage-0，而不是 babel-preset-react-native。

【讨论】：

那行应该在哪里？

【解决方案23】：

使用这个对我有用 npm cache add package name@version 示例：npm 缓存添加 react-native-paper@0.9.1

【讨论】：