The development server returned response error code: 500 in react native

允我心安 提交于 2021-02-17 18:40:32

问题


I am using react-native framework for developing my android app. I want to use react-native-material-design library for making Toolbar with some more features.

I installed this library in current directory where my project is using below command :-

E:\>npm i react-native-material-design -g --save
C:\Users\ch-e00925\AppData\Roaming\npm
`-- react-native-material-design@0.3.7
  +-- react-native-material-design-styles@0.2.6  (git+https://github.com/react-n
ative-material-design/react-native-material-design-styles.git#bdc029c1a1c83ff563
d10868be38b8aed1e9989b)
  `-- react-native-vector-icons@2.1.0
    +-- lodash@4.17.4
    `-- yargs@4.8.1
      +-- cliui@3.2.0
      | +-- strip-ansi@3.0.1
      | | `-- ansi-regex@2.1.1
      | `-- wrap-ansi@2.1.0
      +-- decamelize@1.2.0
      +-- get-caller-file@1.0.2
      +-- lodash.assign@4.2.0
      +-- os-locale@1.4.0
      | `-- lcid@1.0.0
      |   `-- invert-kv@1.0.0
      +-- read-pkg-up@1.0.1
      | +-- find-up@1.1.2
      | | +-- path-exists@2.1.0
      | | `-- pinkie-promise@2.0.1
      | |   `-- pinkie@2.0.4
      | `-- read-pkg@1.1.0
      |   +-- load-json-file@1.1.0
      |   | +-- graceful-fs@4.1.11
      |   | +-- parse-json@2.2.0
      |   | | `-- error-ex@1.3.0
      |   | |   `-- is-arrayish@0.2.1
      |   | +-- pify@2.3.0
      |   | `-- strip-bom@2.0.0
      |   |   `-- is-utf8@0.2.1
      |   +-- normalize-package-data@2.3.5
      |   | +-- hosted-git-info@2.1.5
      |   | +-- is-builtin-module@1.0.0
      |   | | `-- builtin-modules@1.1.1
      |   | +-- semver@5.3.0
      |   | `-- validate-npm-package-license@3.0.1
      |   |   +-- spdx-correct@1.0.2
      |   |   | `-- spdx-license-ids@1.2.2
      |   |   `-- spdx-expression-parse@1.0.4
      |   `-- path-type@1.1.0
      +-- require-directory@2.1.1
      +-- require-main-filename@1.0.1
      +-- set-blocking@2.0.0
      +-- string-width@1.0.2
      | +-- code-point-at@1.1.0
      | `-- is-fullwidth-code-point@1.0.0
      |   `-- number-is-nan@1.0.1
      +-- which-module@1.0.0
      +-- window-size@0.2.0
      +-- y18n@3.2.1
      `-- yargs-parser@2.4.1
        `-- camelcase@3.0.0


E:\>

After this I am getting one issue while running a application, it is may be library was not installed successfully.

E:\Myntra>react-native start
Scanning 557 folders for symlinks in E:\Myntra\node_modules (114ms)
 ┌────────────────────────────────────────────────────────────────────────────┐

 │  Running packager on port 8081.                                            │

 │                                                                            │

 │  Keep this packager running while developing on any JS projects. Feel      │

 │  free to close this tab and run your own packager instance if you          │

 │  prefer.                                                                   │

 │                                                                            │

 │  https://github.com/facebook/react-native                                  │

 │                                                                            │

 └────────────────────────────────────────────────────────────────────────────┘

Looking for JS files in
   E:\Myntra

[01/23/2017, 13:36:07] <START> Initializing Packager
[01/23/2017, 13:36:08]         HMR Server listening on /hot

React packager ready.

[01/23/2017, 13:36:12] <START> Requesting bundle
                               bundle_url: /index.android.bundle?platform=androi
d&dev=true&hot=true&minify=false
[01/23/2017, 13:36:40] <START> Building Haste Map
[01/23/2017, 13:36:40] <END>   Building Haste Map (141ms)
[01/23/2017, 13:36:40] <END>   Initializing Packager (33314ms)
[01/23/2017, 13:36:40] <START> Transforming files
transformed 584/607 (96%)(node:6316) UnhandledPromiseRejectionWarning: Unhandled
 promise rejection (rejection id: 605): UnableToResolveError: Unable to resolve
module react-native-material-design-styles from E:\Myntra\node_modules\react-nat
ive-material-design\lib\config.js: Module does not exist in the module map or in
 these directories:
  E:\Myntra\node_modules\react-native-material-design\node_modules
,   E:\Myntra\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 packager cache: `rm -fr $TMPDIR/react-*` or `npm start -- --reset-cac
he`.
[01/23/2017, 13:54:09] <START> Requesting bundle
                               bundle_url: /index.android.bundle?platform=androi
d&dev=true&hot=true&minify=false

PS : I am on Windows 7 machine, could not find a way to execute commands. I have seen this The development server returned response error code: 500 in react-native but it did not help me.

Can anyone help me to resolve this issue. Thanks in advance.


回答1:


try installing react-native-material-design locally instead of globally.

It looks like react-native-material-design depends on react-native-material-design-styles which won't be packaged by React Native's bundler since its parent is a global module.




回答2:


babel-preset-react-native make this trouble. Run below orders in your project root dir:

$yarn remove babel-preset-react-native

$yarn add babel-preset-react-native@2.1.0




回答3:


I had the same issue with port 8081, change it to 8082. because its already being used by some other service here is step its work for me

First run your package server: Blockquote

react-native start --port 8082

Open another command prompt, start the Android app as usual:

react-native run-android

Once it finishes, now rewrite the tcp port that adb tunnels:

adb reverse tcp:8081 tcp:8082

See the list of adb tcp tunnels:

adb reverse --list

Now You should now see a message like:

(reverse) tcp:8081 tcp:8082

check your app it will run ...........!




回答4:


Sometime this error arise when you don't specify the correct path of .js files

Like instead of typing the Correct path :

var WeatherProject = require('./Main/WeatherProject');

A Wrong Path is typed (capitalization,spelling error,special symbols) :

var WeatherProject = require('./WeatherProject');



回答5:


One of the reasons why I was having this error was because I imported 'react-native' library twice.

import { View, Text, ActivityIndicator } from "react-native";
import { View, Text, ActivityIndicator, TouchableOpacity, StyleSheet } from "react-native";

I don't know If this can really cause this problem but removing the redundant line of import solved this issue for me.




回答6:


First execute, to get the version number:

C:\WINDOWS\system32>react-native -v react-native-cli

2.0.1 react-native: 0.56.0

Then I uninstalled react-native:

C:\WINDOWS\system32>npm uninstall -g react-native-cli

removed 41 packages in 3.999s

Then I installed react-native:

npm install react-native@0.55.4

Then I installed react-native-cli:

npm install -g react-native-cli@1.2.0

Then use this installation to create a react-native project:

react-native init --version="0.55.4" myprojectname



回答7:


I had the same problem, one of my node modules was not well configured (react navigation) so I just re install it locally using

npm install react-navigation --save



回答8:


Whenever any one get this kind of Error with Error Code 500. Following reason behind this.

1) You might work in Linux system & You have to run application with the terminal & check into the Android Simulator rather in Devices.

2)If you work with above then please make sure your Simulator Wife should be off & then work with Studio It will work perfectly.

Hope you will get the solution.




回答9:


  • Go to your root project
  • Open powershell
  • Run npm start —–reset-cache
  • When it is done, don't close it & open another powershell in your project's root directory at the same time
  • Run react-native run-android



回答10:


As a newcomer to the React-native field, I used to face this error loads of times, and I always used to go confused. After a bit of experience though, I realized, it happens when the server tries to import something from a place which doesn't exist.

So checking what all you are importing and if that thing even exists, must be where you should start.

That means this error doesn't just pop up for an uninstalled package or so, but even if you are importing the wrong thing or from the wrong place.




回答11:


1) You might work in Linux system & You have to run application with the terminal & check into the Android Simulator rather in Devices.

2)If you work with above then please make sure your Simulator Wifi should be off & then work with Studio It will work perfectly.

3)Make sure there should be not open multi-pal terminal or command window for at same time. if it then close one




回答12:


It could be that the name of the JavaScript files that you imported is same with any React predefined libraries/components. For example, importing View.js from folder app/components that you have created.

import View from './app/components/View'

The above statement will produce the error. So, by changing the name of file to Interface.js

import Interface from './app/components/Interface'

Now, the code can run well




回答13:


If you are using react-native version: 56.0 then downgrade it version 54 .Its worked for me




回答14:


For those using stores or top level components. If you delete one, then make sure that it's not being imported anywhere else.

In my case, I deleted a store that was being imported top level.




回答15:


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/res

run this command : this will show the error like twice closing of tags or unable to find any module

use sudo before the command in linux based systems




回答16:


For those using stores or top level components. If you delete one, then make sure that it's not being imported anywhere else.

In my case, I deleted a store that was being imported top level.



来源:https://stackoverflow.com/questions/41802749/the-development-server-returned-response-error-code-500-in-react-native

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!