如何在调试React-Native应用程序时解决MODULE_NOT_FOUND异常?

huangapple go评论55阅读模式
英文:

How to Resolve MODULE_NOT_FOUND Exception while Debugging React-Native App?

问题

这是您提供的代码的部分翻译:

在调试React-Native代码时出现异常 [MODULE_NOT_FOUND]

刚刚使用 npx react-native init May 创建了一个应用,并获得了默认的React-Native App.js。

/**
 * 示例 React Native 应用
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';
import type {PropsWithChildren} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

type SectionProps = PropsWithChildren<{
  title: string;
}>;

function Section({children, title}: SectionProps): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          {
            color: isDarkMode ? Colors.white : Colors.black,
          },
        ]}>
        {title}
      </Text>
      <Text
        style={[
          styles.sectionDescription,
          {
            color: isDarkMode ? Colors.light : Colors.dark,
          },
        ]}>
        {children}
      </Text>
    </View>
  );
}

function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <Section title="第一步">
            编辑 <Text style={styles.highlight}>App.tsx</Text> 以更改此屏幕,然后返回查看您的编辑内容。
          </Section>
          <Section title="查看更改">
            <ReloadInstructions />
          </Section>
          <Section title="调试">
            <DebugInstructions />
          </Section>
          <Section title="了解更多">
            阅读文档以发现下一步要做什么
          </Section>
          <LearnMoreLinks />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;

如果您有任何其他问题或需要更多帮助,请随时提出。

英文:

Exception while debugging React-Native code [MODULE_NOT_FOUND]

Just created an app using npx react-native init May and got the default React-Native App.js.

/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
*/
import React from &#39;react&#39;;
import type {PropsWithChildren} from &#39;react&#39;;
import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
useColorScheme,
View,
} from &#39;react-native&#39;;
import {
Colors,
DebugInstructions,
Header,
LearnMoreLinks,
ReloadInstructions,
} from &#39;react-native/Libraries/NewAppScreen&#39;;
type SectionProps = PropsWithChildren&lt;{
title: string;
}&gt;;
function Section({children, title}: SectionProps): JSX.Element {
const isDarkMode = useColorScheme() === &#39;dark&#39;;
return (
&lt;View style={styles.sectionContainer}&gt;
&lt;Text
style={[
styles.sectionTitle,
{
color: isDarkMode ? Colors.white : Colors.black,
},
]}&gt;
{title}
&lt;/Text&gt;
&lt;Text
style={[
styles.sectionDescription,
{
color: isDarkMode ? Colors.light : Colors.dark,
},
]}&gt;
{children}
&lt;/Text&gt;
&lt;/View&gt;
);
}
function App(): JSX.Element {
const isDarkMode = useColorScheme() === &#39;dark&#39;;
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
return (
&lt;SafeAreaView style={backgroundStyle}&gt;
&lt;StatusBar
barStyle={isDarkMode ? &#39;light-content&#39; : &#39;dark-content&#39;}
backgroundColor={backgroundStyle.backgroundColor}
/&gt;
&lt;ScrollView
contentInsetAdjustmentBehavior=&quot;automatic&quot;
style={backgroundStyle}&gt;
&lt;Header /&gt;
&lt;View
style={{
backgroundColor: isDarkMode ? Colors.black : Colors.white,
}}&gt;
&lt;Section title=&quot;Step One&quot;&gt;
Edit &lt;Text style={styles.highlight}&gt;App.tsx&lt;/Text&gt; to change this
screen and then come back to see your edits.
&lt;/Section&gt;
&lt;Section title=&quot;See Your Changes&quot;&gt;
&lt;ReloadInstructions /&gt;
&lt;/Section&gt;
&lt;Section title=&quot;Debug&quot;&gt;
&lt;DebugInstructions /&gt;
&lt;/Section&gt;
&lt;Section title=&quot;Learn More&quot;&gt;
Read the docs to discover what to do next:
&lt;/Section&gt;
&lt;LearnMoreLinks /&gt;
&lt;/View&gt;
&lt;/ScrollView&gt;
&lt;/SafeAreaView&gt;
);
}
const styles = StyleSheet.create({
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: &#39;600&#39;,
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: &#39;400&#39;,
},
highlight: {
fontWeight: &#39;700&#39;,
},
});
export default App;

If I try to start it using npm run android (I'm using Android Studio Emulator) I get a message in terminal like that:

Starting a Gradle Daemon, 1 incompatible and 1 stopped Daemons could not be reused, use --status for details
:ReactNative:Unexpected empty result of running &#39;[node, C:\Users\-\Desktop\проекты\приложение RN\May\node_modules\@react-native-community\cli\build\bin.js, config]&#39; command.
:ReactNative:Running &#39;[node, C:\Users\-\Desktop\проекты\приложение RN\May\node_modules\@react-native-community\cli\build\bin.js, config]&#39; command failed.
FAILURE: Build failed with an exception.
* Where:
Script &#39;C:\Users\-\Desktop\�������\���������� RN\May\node_modules\@react-native-community\cli-platform-android\native_modules.gradle&#39; line: 413
* What went wrong:
A problem occurred evaluating script.
&gt; node:internal/modules/cjs/loader:1078  throw err;  ^Error: Cannot find module &#39;C:\Users\-\Desktop\РїСЂРѕР&#181;кты\РїСЂРёР&#187;РѕР&#182;Р&#181;РЅРёР&#181; RN\May\node_modules\@react-native-community\cli\build\bin.js&#39;    at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)    at Module._load (node:internal/modules/cjs/loader:920:27)    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)    at node:internal/main/run_main_module:23:47 {  code: &#39;MODULE_NOT_FOUND&#39;,  requireStack: []}Node.js v18.16.0
* Try:
&gt; Run with --stacktrace option to get the stack trace.
&gt; Run with --info or --debug option to get more log output.
&gt; Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 8s
error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081
:ReactNative:Unexpected empty result of running &#39;[node, C:\Users\-\Desktop\проекты\приложение RN\May\node_modules\@react-native-community\cli\build\bin.js, config]&#39; command.
:ReactNative:Running &#39;[node, C:\Users\-\Desktop\проекты\приложение RN\May\node_modules\@react-native-community\cli\build\bin.js, config]&#39; command failed.
FAILURE: Build failed with an exception.
* Where:
Script &#39;C:\Users\-\Desktop\�������\���������� RN\May\node_modules\@react-native-community\cli-platform-android\native_modules.gradle&#39; line: 413
* What went wrong:
A problem occurred evaluating script.
&gt; node:internal/modules/cjs/loader:1078  throw err;  ^Error: Cannot find module &#39;C:\Users\-\Desktop\РїСЂРѕР&#181;кты\РїСЂРёР&#187;РѕР&#182;Р&#181;РЅРёР&#181; RN\May\node_modules\@react-native-community\cli\build\bin.js&#39;    at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)    at Module._load (node:internal/modules/cjs/loader:920:27)    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)    at node:internal/main/run_main_module:23:47 {  code: &#39;MODULE_NOT_FOUND&#39;,  requireStack: []}Node.js v18.16.0
* Try:
&gt; Run with --stacktrace option to get the stack trace.
&gt; Run with --info or --debug option to get more log output.
&gt; Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 8s
at makeError (C:\Users\-\Desktop\проекты\приложение RN\May\node_modules\execa\index.js:174:9)
at C:\Users\-\Desktop\проекты\приложение RN\May\node_modules\execa\index.js:278:16
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async runOnAllDevices (C:\Users\-\Desktop\проекты\приложение RN\May\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:82:7)
at async Command.handleAction (C:\Users\-\Desktop\проекты\приложение RN\May\node_modules\@react-native-community\cli\build\index.js:108:9)
info Run CLI with --verbose flag for more details.

Android Studio's emulator starts working, gets to the Home screen, but nothing shows on the screen as I get an exception. Just started looking into React-Native, so I'll appreciate any help. For more information: I use Node.JS v18.16.0, Java JDK 11, code in Visual Studio Code. Tried using npm install, didn't help. Tried to reinstall Node.js, also didn't help.

答案1

得分: 1

Move it to Desktop and try again, looking at the logs the folder path seems inconsistent so use English directory names.

英文:

Move it to Desktop and try again, looking at the logs the folder path seems inconsistent so use English directory names.

huangapple
  • 本文由 发表于 2023年5月22日 03:16:12
  • 转载请务必保留本文链接:https://go.coder-hub.com/76301533.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定