TypeError [ERR_INVALID_CHAR]: Invalid character in header content ["X-React-Native-Project-Root"] at ServerResponse.setHeader (node:_http_outgoing:651:3)

[bouakram]

Description

I encountered the following error when starting a new React Native project:

Steps to Reproduce:

Create a new React Native project using the React Native CLI.
Run the project using the command: npm start -> a for android.
Observe the error mentioned above.

Expected Behavior

I expected the new React Native project to start without any errors.

Error

info Opening app on Android...
TypeError [ERR_INVALID_CHAR]: Invalid character in header content ["X-React-Native-Project-Root"] at ServerResponse.setHeader (node:_http_outgoing:651:3)

Environment

Node.js version: >=18
npm version: 10.1.0

React Native Version
0.73.2

Affected Platforms
Runtime - Android, Build - Windows

Output of npx react-native info

info Fetching system and libraries information... ... System: OS: Windows 11 10.0.22621 CPU: (8) x64 Intel(R) Core(TM) i5-10310U CPU @ 1.70GHz Memory: 2.37 GB / 15.77 GB Binaries: Node: version: 18.17.0 path: C:\Program Files\nodejs\node.EXE Yarn: Not Found npm: version: 10.1.0 path: C:\Program Files\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: Not Found Windows SDK: Not Found IDEs: Android Studio: AI-223.8836.35.2231.10406996 Visual Studio: Not Found Languages: Java: 11.0.20 Ruby: Not Found npmPackages: "@react-native-community/cli": Not Found react: installed: 18.2.0 wanted: 18.2.0 react-native: installed: 0.73.2 wanted: 0.73.2 react-native-windows: Not Found npmGlobalPackages: "*react-native*": Not Found Android: hermesEnabled: true newArchEnabled: false iOS: hermesEnabled: Not found newArchEnabled: Not found ...

Stacktrace or Logs

info Opening app on Android... TypeError [ERR_INVALID_CHAR]: Invalid character in header content ["X-React-Native-Project-Root"] at ServerResponse.setHeader (node:_http_outgoing:651:3) at statusPageMiddleware (C:\Users\kikou\OneDrive\المستندات\ReactNative projects\algbnb\client\node_modules\@react-native-community\cli-server-api\build\statusPageMiddleware.js:19:7) at call (C:\Users\kikou\OneDrive\المستندات\ReactNative projects\algbnb\client\node_modules\connect\index.js:239:7) at next (C:\Users\kikou\OneDrive\المستندات\ReactNative projects\algbnb\client\node_modules\connect\index.js:183:5) at next (C:\Users\kikou\OneDrive\المستندات\ReactNative projects\algbnb\client\node_modules\connect\index.js:161:14) at next (C:\Users\kikou\OneDrive\المستندات\ReactNative projects\algbnb\client\node_modules\connect\index.js:161:14) at next (C:\Users\kikou\OneDrive\المستندات\ReactNative projects\algbnb\client\node_modules\connect\index.js:161:14) at next (C:\Users\kikou\OneDrive\المستندات\ReactNative projects\algbnb\client\node_modules\connect\index.js:161:14) at nocache (C:\Users\kikou\OneDrive\المستندات\ReactNative projects\algbnb\client\node_modules\nocache\index.js:11:5) at call (C:\Users\kikou\OneDrive\المستندات\ReactNative projects\algbnb\client\node_modules\connect\index.js:239:7)

Screenshots and Videos

[RafikGadzhiyev]

I had the same issue. And I was researching a lot and I found this^

1. Go to node_modules/@react-native-community/cli-server-api/build/statusPageMiddleware.js
2. On line 19 wrap process.cwd() to new URL() like this:
   new URL(process.cwd())
3. Before reload clean cache in npm using npm cache clean --force
4. Run using npm run start / npm run android

I hope this will help you too 😇

[bouakram]

I had the same issue. And I was researching a lot and I found this^

1. Go to node_modules/@react-native-community/cli-server-api/build/statusPageMiddleware.js
2. On line 19 wrap process.cwd() to new URL() like this:
   new URL(process.cwd())
3. Before reload clean cache in npm using npm cache clean --force
4. Run using npm run start / npm run android

I hope this will help you too 😇

thank you saved my dev day 😊

[bouakram]

the solution provided by @RafikGadzhiyev is correct thanks to him.

[arnaudambro]

I had the same issue. And I was researching a lot and I found this^

1. Go to node_modules/@react-native-community/cli-server-api/build/statusPageMiddleware.js
2. On line 19 wrap process.cwd() to new URL() like this:
   new URL(process.cwd())
3. Before reload clean cache in npm using npm cache clean --force
4. Run using npm run start / npm run android

I hope this will help you too 😇

I got

TypeError: Invalid URL
    at new URL (node:internal/url:775:36)
    at statusPageMiddleware (/node_modules/@react-native-community/cli-server-api/build/statusPageMiddleware.js:20:48)
``

[whitebrand]

Same here, did you solve it @arnaudambro ?

UPDATE: If anyone else has the same error, please, check your project folder path and confirm there aren´t any special characteres on it. In the example of this issue the path has Arabic characters C:\Users\kikou\OneDrive\المستندات\ReactNative projects\, same for accents "áéíóú", "àèìòù" or any other non english "çñ..." character. Check this for the full path and then try to build the app again.

[ThienLE0811]

I had the same issue. And I was researching a lot and I found this^

1. Go to node_modules/@react-native-community/cli-server-api/build/statusPageMiddleware.js
2. On line 19 wrap process.cwd() to new URL() like this:
   new URL(process.cwd())
3. Before reload clean cache in npm using npm cache clean --force
4. Run using npm run start / npm run android

I hope this will help you too 😇

Thank you, my problem has been solved

[pauloscardoso]

O mesmo aqui, você resolveu@arnaudambro?

ATUALIZAÇÃO: Se alguém tiver o mesmo erro, por favor, verifique o caminho da pasta do seu projeto e confirme se não há caracteres especiais nela. No exemplo desta edição o caminho possui caracteres árabes C:\Users\kikou\OneDrive\المستندات\ReactNative projects\, o mesmo para acentos "áéíóú", "àèìòù" ou qualquer outro caractere "çñ..." não inglês. Verifique o caminho completo e tente criar o aplicativo novamente.

Sorted out. My path had space between two texts. Space removed and the problem went away.

[Andrey123815]

THE PROBLEM IS ONLY IN PATH TO YOUR PROJECT

You can use only latine chars, may also use "-" in naming

If your path to project naming is correct you dont need any ways written higher

But if you need path with not correct chars you may
CHANGE IN FILE node_modules/@react-native-community/cli-server-api/build/statusPageMiddleware.js STRING
res.setHeader('X-React-Native-Project-Root', process.cwd());
TO
res.setHeader('X-React-Native-Project-Root', new URL(process.cwd(), 'file://'));

and always will work (don't forget to clear cache!)

newc URL allow us to make ref to local root file, for example:
for path "/home/user/Рабочий стол" link pathname will be like "'/home/user/%D0%A0%D0%B0%D0%B1%D0%BE%D1%87%D0%B8%D0%B9%20%D1%81%D1%82%D0%BE%D0%BB"

[bruno-keiko]

THE PROBLEM IS ONLY IN PATH TO YOUR PROJECT

You can use only latine chars, may also use "-" in naming

If your path to project naming is correct you dont need any ways written higher

But if you need path with not correct chars you may CHANGE IN FILE node_modules/@react-native-community/cli-server-api/build/statusPageMiddleware.js STRING res.setHeader('X-React-Native-Project-Root', process.cwd()); TO res.setHeader('X-React-Native-Project-Root', new URL(process.cwd(), 'file://'));

and always will work (don't forget to clear cache!)

newc URL allow us to make ref to local root file, for example: for path "/home/user/Рабочий стол" link pathname will be like "'/home/user/%D0%A0%D0%B0%D0%B1%D0%BE%D1%87%D0%B8%D0%B9%20%D1%81%D1%82%D0%BE%D0%BB"

Thank you, this worked for me.

[GustavoHNRamos]

Same here, did you solve it @arnaudambro ?

UPDATE: If anyone else has the same error, please, check your project folder path and confirm there aren´t any special characteres on it. In the example of this issue the path has Arabic characters C:\Users\kikou\OneDrive\المستندات\ReactNative projects\, same for accents "áéíóú", "àèìòù" or any other non english "çñ..." character. Check this for the full path and then try to build the app again.

Thank you, my path had a non english character

[hw514352]

deleting the 19 line X-React-Native-Project-Root

[wencai123]

My path looks fine, but I still get an error

TypeError [ERR_INVALID_URL]: Invalid URL
at new NodeError (node:internal/errors:400:5)
at URL.onParseError (node:internal/url:565:9)
at new URL (node:internal/url:645:5)
at statusPageMiddleware (/Users/zhangwencai/qianduan/code/AwesomeProject/node_modules/@react-native-community/cli-server-api/build/statusPageMiddleware.js:19:48)
at call (/Users/zhangwencai/qianduan/code/AwesomeProject/node_modules/connect/index.js:239:7)
at next (/Users/zhangwencai/qianduan/code/AwesomeProject/node_modules/connect/index.js:183:5)
at next (/Users/zhangwencai/qianduan/code/AwesomeProject/node_modules/connect/index.js:161:14)
at next (/Users/zhangwencai/qianduan/code/AwesomeProject/node_modules/connect/index.js:161:14)
at next (/Users/zhangwencai/qianduan/code/AwesomeProject/node_modules/connect/index.js:161:14)
at next (/Users/zhangwencai/qianduan/code/AwesomeProject/node_modules/connect/index.js:161:14)

[Andrey123815]

My path looks fine, but I still get an error

TypeError [ERR_INVALID_URL]: Invalid URL
at new NodeError (node:internal/errors:400:5)
at URL.onParseError (node:internal/url:565:9)
at new URL (node:internal/url:645:5)
at statusPageMiddleware (/Users/zhangwencai/qianduan/code/AwesomeProject/node_modules/@react-native-community/cli-server-api/build/statusPageMiddleware.js:19:48)
at call (/Users/zhangwencai/qianduan/code/AwesomeProject/node_modules/connect/index.js:239:7)
at next (/Users/zhangwencai/qianduan/code/AwesomeProject/node_modules/connect/index.js:183:5)
at next (/Users/zhangwencai/qianduan/code/AwesomeProject/node_modules/connect/index.js:161:14)
at next (/Users/zhangwencai/qianduan/code/AwesomeProject/node_modules/connect/index.js:161:14)
at next (/Users/zhangwencai/qianduan/code/AwesomeProject/node_modules/connect/index.js:161:14)
at next (/Users/zhangwencai/qianduan/code/AwesomeProject/node_modules/connect/index.js:161:14)

You can try to move project to another path or try the second way described in my answer higher