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

bouakram · 2024-01-26T16:40:08Z

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

The text was updated successfully, but these errors were encountered:

RafikGadzhiyev · 2024-01-26T16:58:22Z

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

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

I hope this will help you too 😇

bouakram · 2024-01-26T22:46:47Z

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

Go to node_modules/@react-native-community/cli-server-api/build/statusPageMiddleware.js

On line 19 wrap process.cwd() to new URL() like this:
new URL(process.cwd())

Before reload clean cache in npm using npm cache clean --force

Run using npm run start / npm run android

I hope this will help you too 😇

thank you saved my dev day 😊

bouakram · 2024-01-26T22:47:35Z

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

arnaudambro · 2024-01-28T07:58:40Z

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

Go to node_modules/@react-native-community/cli-server-api/build/statusPageMiddleware.js

On line 19 wrap process.cwd() to new URL() like this:
new URL(process.cwd())

Before reload clean cache in npm using npm cache clean --force

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 · 2024-01-30T15:30:47Z

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 · 2024-02-02T05:05:26Z

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

Go to node_modules/@react-native-community/cli-server-api/build/statusPageMiddleware.js

On line 19 wrap process.cwd() to new URL() like this:
new URL(process.cwd())

Before reload clean cache in npm using npm cache clean --force

Run using npm run start / npm run android

I hope this will help you too 😇

Thank you, my problem has been solved

pauloscardoso · 2024-02-08T19:01:52Z

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 · 2024-02-17T10:40:56Z

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 · 2024-02-29T04:21:06Z

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 · 2024-03-18T18:51:31Z

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 · 2024-04-07T15:40:09Z

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

wencai123 · 2024-04-23T10:21:43Z

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 · 2024-04-23T15:51:29Z

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

wencai123 · 2024-04-24T02:12:20Z

我的路径看起来不错，但仍然出现错误
TypeError [ERR_INVALID_URL]：
新的 NodeError (node:internal/errors:400:5) 处的URL 无效。新的 URL
(node:internal/url:645:5) 处的 URL.onParseError (
node:internal/url:565:9) 处的 URL 无效
在 statusPageMiddleware (/Users/zhangwencai/qianduan/code/AwesomeProject/node_modules/@react-native-community/cli-server-api/build/statusPageMiddleware.js:19:48)
在电话 (/Users/zhangwencai/qianduan/code ) /AwesomeProject/node_modules/connect/index.js:239:7）
在下一个（/Users/zhangwencai/qianduan/code/AwesomeProject/node_modules/connect/index.js:183:5）
在下一个（/Users/zhangwencai/qianduan） /code/AwesomeProject/node_modules/connect/index.js:161:14）
在下一个（/Users/zhangwencai/qianduan/code/AwesomeProject/node_modules/connect/index.js:161:14）
在下一个（/Users/zhangwencai） /qianduan/code/AwesomeProject/node_modules/connect/index.js:161:14）
在下一个（/Users/zhangwencai/qianduan/code/AwesomeProject/node_modules/connect/index.js:161:14）

您可以尝试将项目移动到另一条路径或尝试我的答案中描述的第二种方法

Problem solved, thank you

itlingxiu · 2024-04-30T01:21:31Z

删除第19行X-React-Native-Project-Root

@hw514352 这个方法挺管用的

itlingxiu · 2024-04-30T01:51:39Z

@bouakram 这个方法也可以解决那个问题2. new URL()

szymonrybczak · 2024-07-09T14:50:31Z

hey! is anyone able to validate if this fix is working properly? We'd like to upstream this change :)

diff --git forkSrcPrefix/packages/cli-server-api/src/statusPageMiddleware.ts forkDstPrefix/packages/cli-server-api/src/statusPageMiddleware.ts
index 3e98f2b2b46c6401bb3630c746787aec1b8dac3c..2417950d2bf0b88398d2441c6f8484cacddf8900 100644
--- forkSrcPrefix/packages/cli-server-api/src/statusPageMiddleware.ts
+++ forkDstPrefix/packages/cli-server-api/src/statusPageMiddleware.ts
@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import http from 'http';
+import path from 'path';
 
 /**
  * Status page so that anyone who needs to can verify that the packager is
@@ -14,6 +15,7 @@ export default function statusPageMiddleware(
   _req: http.IncomingMessage,
   res: http.ServerResponse,
 ) {
-  res.setHeader('X-React-Native-Project-Root', process.cwd());
+  const projectRoot = path.normalize(process.cwd());
+  res.setHeader('X-React-Native-Project-Root', projectRoot);
   res.end('packager-status:running');
 }

Andrey123815 · 2024-07-11T18:40:02Z

hey! is anyone able to validate if this fix is working properly? We'd like to upstream this change :)

diff --git forkSrcPrefix/packages/cli-server-api/src/statusPageMiddleware.ts forkDstPrefix/packages/cli-server-api/src/statusPageMiddleware.ts
index 3e98f2b2b46c6401bb3630c746787aec1b8dac3c..2417950d2bf0b88398d2441c6f8484cacddf8900 100644
--- forkSrcPrefix/packages/cli-server-api/src/statusPageMiddleware.ts
+++ forkDstPrefix/packages/cli-server-api/src/statusPageMiddleware.ts
@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import http from 'http';
+import path from 'path';
 
 /**
  * Status page so that anyone who needs to can verify that the packager is
@@ -14,6 +15,7 @@ export default function statusPageMiddleware(
   _req: http.IncomingMessage,
   res: http.ServerResponse,
 ) {
-  res.setHeader('X-React-Native-Project-Root', process.cwd());
+  const projectRoot = path.normalize(process.cwd());
+  res.setHeader('X-React-Native-Project-Root', projectRoot);
   res.end('packager-status:running');
 }

I started the project, but this solution does not work and should not work in theory. The problem is not slashes in the path to the project, but that there may be characters in the path that require conversion via a new URL (you can see the problem in detail in my comment on this problem above). The solution I described works for me

aligururyaman · 2024-07-22T11:11:57Z

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

Go to node_modules/@react-native-community/cli-server-api/build/statusPageMiddleware.js

On line 19 wrap process.cwd() to new URL() like this:
new URL(process.cwd())

Before reload clean cache in npm using npm cache clean --force

Run using npm run start / npm run android

I hope this will help you too 😇

Thanks....

muhammetfeyzi · 2024-08-07T21:02:09Z

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

Go to node_modules/@react-native-community/cli-server-api/build/statusPageMiddleware.js

On line 19 wrap process.cwd() to new URL() like this:
new URL(process.cwd())

Before reload clean cache in npm using npm cache clean --force

Run using npm run start / npm run android

I hope this will help you too 😇

If it doesn't work after all this, reload it and the emulator will work for me :)

Kamo72 · 2024-10-24T08:17:38Z

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

Go to node_modules/@react-native-community/cli-server-api/build/statusPageMiddleware.js

On line 19 wrap process.cwd() to new URL() like this:
new URL(process.cwd())

Before reload clean cache in npm using npm cache clean --force

Run using npm run start / npm run android

I hope this will help you too 😇

thx for giving me solution! it works :D

bouakram added the bug report label Jan 26, 2024

bouakram closed this as completed Jan 26, 2024

AndrewWladis added a commit to AndrewWladis/swiftie-swipe that referenced this issue Apr 25, 2024

Fixed problem by using react-native-community/cli#2279

ea9c9fe

szymonrybczak mentioned this issue Aug 30, 2024

fix: invalid character in header on Windows #2491

Open

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

bouakram commented Jan 26, 2024

RafikGadzhiyev commented Jan 26, 2024

bouakram commented Jan 26, 2024

bouakram commented Jan 26, 2024

arnaudambro commented Jan 28, 2024

whitebrand commented Jan 30, 2024 •

edited

Loading

ThienLE0811 commented Feb 2, 2024 •

edited

Loading

pauloscardoso commented Feb 8, 2024

Andrey123815 commented Feb 17, 2024 •

edited

Loading

bruno-keiko commented Feb 29, 2024

GustavoHNRamos commented Mar 18, 2024

hw514352 commented Apr 7, 2024

wencai123 commented Apr 23, 2024

Andrey123815 commented Apr 23, 2024

wencai123 commented Apr 24, 2024

itlingxiu commented Apr 30, 2024

itlingxiu commented Apr 30, 2024

szymonrybczak commented Jul 9, 2024

Andrey123815 commented Jul 11, 2024

aligururyaman commented Jul 22, 2024

muhammetfeyzi commented Aug 7, 2024

Kamo72 commented Oct 24, 2024 •

edited

Loading

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

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

Comments

bouakram commented Jan 26, 2024

RafikGadzhiyev commented Jan 26, 2024

bouakram commented Jan 26, 2024

bouakram commented Jan 26, 2024

arnaudambro commented Jan 28, 2024

whitebrand commented Jan 30, 2024 • edited Loading

ThienLE0811 commented Feb 2, 2024 • edited Loading

pauloscardoso commented Feb 8, 2024

Andrey123815 commented Feb 17, 2024 • edited Loading

bruno-keiko commented Feb 29, 2024

GustavoHNRamos commented Mar 18, 2024

hw514352 commented Apr 7, 2024

wencai123 commented Apr 23, 2024

Andrey123815 commented Apr 23, 2024

wencai123 commented Apr 24, 2024

itlingxiu commented Apr 30, 2024

itlingxiu commented Apr 30, 2024

szymonrybczak commented Jul 9, 2024

Andrey123815 commented Jul 11, 2024

aligururyaman commented Jul 22, 2024

muhammetfeyzi commented Aug 7, 2024

Kamo72 commented Oct 24, 2024 • edited Loading

whitebrand commented Jan 30, 2024 •

edited

Loading

ThienLE0811 commented Feb 2, 2024 •

edited

Loading

Andrey123815 commented Feb 17, 2024 •

edited

Loading

Kamo72 commented Oct 24, 2024 •

edited

Loading