127.0.0.1 live-server in npm can't open in any browser. what is the problem here? - reactjs

Please anyone help me on my laptop when i live-server public enter after install -g live-server then show this text and not open in browser:-
events.js:291
throw er; // Unhandled 'error' event
^
Error: spawn cmd ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:268:19)
at onErrorNT (internal/child_process.js:468:16)
at processTicksAndRejections (internal/process/task_queues.js:80:21)
Emitted 'error' event on ChildProcess instance at:
at Process.ChildProcess._handle.onexit (internal/child_process.js:274:12)
at onErrorNT (internal/child_process.js:468:16)
at processTicksAndRejections (internal/process/task_queues.js:80:21) {
errno: -4058,
code: 'ENOENT',
syscall: 'spawn cmd',
path: 'cmd',
spawnargs: [ '/c', 'start', '""', '/b', 'http://127.0.0.1:8080' ]

Just run the Command Prompt as Administrator before running live-server and things should work the way they should.
Edit: Actually no. I had the same problem and tried that: it worked but (later discovered) for some reason works only if we run 'live-server' from C:\Windows\System32>. We're back to square one. Sorry.

I had a similar issue now, not exactly the same, but I think my suggested solution will work.
But first, your issue seems you don't have the global node_modules folder in your path. You can check this with echo $PATH from cmd and set it by searching for "environment variables" after pressing windows button once.
Even if most packages suggest installing them with -g this is actually usually not the best, mainly because your project will not be self-contained.
So you will always need to globally install your dependencies when on a new machine, production server, etc...
While it's convenient to not have to download some packages often used on the development machine, it's much safer to run npm/yarn install without -g and then wait for a minute extra after your cloned the project (i bet many people disagree with me on that).
Anyway, there are a few tricks with live-reload and I found it hard to use unless run as a script. Not only because of this reason but also because it looks for .live-reload.json config inside the home folder for the user and this cant be specified as an argument.
TLDR;
This is the relevant parts from my project, this should work for you as well:
package.json
{
scripts:{
"local": "yarn build && node live-server.js",
"build" : "#install other dependencies"
},
"devDependencies": {
"live-server": "^1.2.1"
}
}
live-server.js
var liveServer = require("live-server");
const path = require('path');
var params = {
port: 8181, // Set the server port. Defaults to 8080.
host: "127.0.0.1", // Set the address to bind to. Defaults to 0.0.0.0 or process.env.IP.
root: path.join(__dirname, '/public'), // Set root directory that's being served. Defaults to cwd.
open: true, // When false, it won't load your browser by default.
wait: 100, // Waits for all changes, before reloading. Defaults to 0 sec.
logLevel: 2, // 0 = errors only, 1 = some, 2 = lots
};
liveServer.start(params);

Related

Next JS : Error: EPERM: operation not permitted, open

I am trying to build the next Js app production files to deploy it on cPanel, when I execute
npm run dev the app is working just fine but as I start to build a production file with the help of this video(https://youtu.be/1ykSXau838c) and executes npm run build it gives me an error in the terminal as given below:
PS C:\Users\hp\Desktop\reactJs-project\NextJs\test-app> npm run build
> test-app#0.1.0 build
> next build
info - Checking validity of types
info - Creating an optimized production build .node:events:368
throw er; // Unhandled 'error' event
^
Error: EPERM: operation not permitted, open 'C:\Users\hp\Desktop\reactJs-project\NextJs\test-app\.next\trace'
Emitted 'error' event on WriteStream instance at:
at emitErrorNT (node:internal/streams/destroy:157:8)
at emitErrorCloseNT (node:internal/streams/destroy:122:3)
at processTicksAndRejections (node:internal/process/task_queues:83:21) {
errno: -4048,
code: 'EPERM',
syscall: 'open',
path: 'C:\\Users\\hp\\Desktop\\reactJs-project\\NextJs\\test-app\\.next\\trace'
}
so I just want to know is there any way to solve this problem?
Posting comment from Koronag as an answer (as it helped me with this error and seems the most likely cause)...
This error is commonly seen when running a build while the dev server is already running. (E.g. in my case, I had a local build running via npm run dev and was trying to commit/push code, which invoked a Git Hook that also runs npm run dev.)
For me, it works fine this answer drives me to the resolver.
I run 2 scripts in terminals:
once for development
another for the build process.
So after killing the development script it looks perfectly fine!
From next-sitemap repo README.md
"Having next-sitemap command & next-sitemap.js file may result in file opening instead of building sitemaps in windows machines.
As a solution to this, it is now possible to use a custom config file instead of next-sitemap.js. Just pass --config .js to build command."
Next-Sitemap README.md - Building Sitemaps
The above worked for me

sveltekit build port is always 3000 but it is not available in my server. How do you change port in svelte.config.js?

Port 3000 is occupied in my hosting server. Now I'm building a sveltekit app.
When I use
npm run dev --port 4000
or npm run build and then
npm run preview --port 4000
I'm able to start the sveltekit using localhost:4000
My npm run build is always pointing me to
skapp#0.0.1 preview
> svelte-kit preview
SvelteKit v1.0.0-next.260
network: not exposed
local: http://localhost:3000
after searching online some of the possible solutions available online is to change the port in the adapter-node config env like so:
const config = {
kit: {
adapter: adapter({
out : 'buildit',
env : {
port : 4000,
}
// vite : {
// server : {strictPort : false}
// }
}),
}
};
export default config;
I go back and build the sveltekit again then run the command npm run preview again, like so:
npm run build
npm run preview
but the it gives me the same 3000 port. Some of the discussion online pointed to the vite flag where you set the strictPort to false and it will look for the next available port but that didn't change the port and the build still fixated on port 3000.
When I use npm run build --port 4000, while another app is running on port 3000, I get an error.
Error: listen EADDRINUSE: address already in use 127.0.0.1:3000
at Server.setupListenHandle [as _listen2] (net.js:1318:16)
at listenInCluster (net.js:1366:12)
at GetAddrInfoReqWrap.doListen [as callback] (net.js:1503:7)
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:69:8)
Emitted 'error' event on Server instance at:
at emitErrorNT (net.js:1345:8)
at processTicksAndRejections (internal/process/task_queues.js:82:21) {
code: 'EADDRINUSE',
errno: -4091,
syscall: 'listen',
address: '127.0.0.1',
port: 3000
}
It seems like it is a server instance error. How to fix it?
It seems like fewer developers are interested in sveltekit because when I used to post a question about sapper, I used to get an answer within hours but I'm noticing that questions about sveltekit getting answered in days. Hopefully there are some developers out there keeping their eyes on sveltekit tag in stackoverflow.
So my question how to change the npm run build so the sveltekit app start using a different port. I'm not asking about npm run dev or npm run preview. My inquiry is about sveltekit to run on port 4000. How the npm run build could be used to build sveltekit app with a different port?
svelte-kit dev and svelte-kit preview are used for development and debugging purposes and should not be run for production builds.
when deploying to a server you run svelte-kit build to generate the final site (in your case that should be located in ./buildit)
i don't think that you can statically specify the port being used, but you can provide it when launching the server using an environment variable.
(i am using #sveltejs/adapter-node, so this might be different for other adapters)
PORT=1234 node buildit/index.js
i hope this is what you were asking for, to be honest i don't think i quite understood the question
change the port mentioned at the bottom on the index.js that was created in build folder...
After "npm run build", you can change the default port 3000 in the build\index.js file(Line 218).
const port = env('PORT', !path && '3000');
->
const port = env('PORT', !path && '1234');

Denial of Service - http proxy - React

I am pretty sure that this error appeared only today and it never occurred before.
When I create a new react app, the process found 1 high vulnerability:
High: Denial of Service
Package: http-proxy
Patched in: No patch available
Dependency of: react-scripts
Path: react-scripts > webpack-dev-server > http-proxy-middleware > http-proxy
More info: https://npmjs.com/advisories/1486
(My version of "react-scripts" is 3.4.1). Of course, "npm audit fix" doesn't work.
What can I do about it? Is it something to care about or I can work normally?
All versions of http-proxy are vulnerable to Denial of Service. An HTTP request with a long body triggers an ERR_HTTP_HEADERS_SENT unhandled exception that crashes the proxy server. This is only possible when the proxy server sets headers in the proxy request using the proxyReq.setHeader function.
For a proxy server running on http://localhost:3000, the following curl request triggers the unhandled exception:
curl -XPOST http://localhost:3000 -d "$(python -c 'print("x"*1025)')"
Remediation
No fix is currently available. Consider using an alternative package until a fix is made available.
Conclusion
But for the time being, you can work normally. It should not cause any type of working anomaly as of now.
Upgrade to http-proxy 1.18.1+ which contains a fix for the security issue detailed. NPM have now updated their security APIs to include the information that this issue is now resolved.
See https://github.com/http-party/node-http-proxy/issues/1446 for more info
first install the package
npm install http-proxy --save-dev
in your package.json file add the following statements
"resolutions" :{
"http-proxy": "^1.18.1"
}
"scripts" :{
"preinstall": "npx npm-force-resolutions"
}
then run the command in the command prompt-
npm install
this might fixed your vulnerability

npm start on new create-react-app build returns ELIFECYCLE error

Made a new react app using create-react-app and now getting the following error in the terminal when running npm start:
> react-scripts start
Attempting to bind to HOST environment variable: x86_64-apple-darwin13.4.0
If this was unintentional, check that you haven't mistakenly set it in your shell.
events.js:167
throw er; // Unhandled 'error' event
^
Error: getaddrinfo ENOTFOUND x86_64-apple-darwin13.4.0
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:57:26)
Emitted 'error' event at:
at GetAddrInfoReqWrap.doListen [as callback] (net.js:1468:12)
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:57:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! aqi#0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the aqi#0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/chris/.npm/_logs/2018-12-24T10_07_46_970Z-debug.log
Tried removing the node-module folder and npm install.
type unset HOST in the terminal. It will solve the issue.
I struggled with this exact issue for an entire day. If you do unset HOST, it will solve it, but temporarily. The simple solution to this bug is as follows (this is for Mac, for Window the commands may differ):
Open your bash with the following command: open ~/.bash_profile
Write this down (exactly what it says) all the way down the file once the file opens: HOST="localhost"
After that, save the file and quit (Command + q)
Finally, reload the environment by typing this on the terminal:
source ~/.bash_profile
If you do all the steps correctly, this should resolve the bug.
Mostly the problem occurs when you set a specific hostname instead of regular used one localhost.
On Mac/Linux terminal run hostname, you will receive the specified hostname. If it's something different than localhost refer to your bash profile config file (ie for ZSH it's .zshrc, or for Bash it's .bashrc in your home directory); and if HOST=localhost exists in the profile comment it.
PS: do not forget to restart your terminal to make the change takes effect.
I also struggled with this. Many online solutions only solve the first part. Here I'll provide my approach to fully solve the issue and make npm start work
Understand the issue:
There are 2 parts to the problem. First, you want to set your environmental variable, HOST, to "localhost". You can do it by typing in your terminal (anywhere):
nano ~/.bash_profile
In the bash file, type HOST="localhost" in a new line and type: export HOST. This directs your program to go to this HOST by default
Save change by Ctrl + X, then press Y (Yes), then press Enter
Return to your terminal, run: source ~/.bash_profile to refresh the terminal
Now, your computer has updated its HOST variable to localhost. You can check that by typing: env | grep HOST in the terminal. Grep means to grab that variable in the variable list.
Hopefully that solves the issue fully. If you then encounter: dyld: lazy symbol binding failed.
This simply means there's something wrong with the fsevents. Why? I am not sure, but a sure fix is by deleting the node_modules/fsevent files from my search. A permanent fix is to remove the node modules and re-do the npm install. Make sure that fsevent is version 2.0+!
Hope that helps. This surely took some time to debug!
References:
dyld: lazy symbol binding failed: Symbol not found: _node_module_register
https://medium.com/#choy/fixing-create-react-app-when-npm-fails-to-start-because-your-host-environment-variable-is-being-4c8a9fa0b461
https://medium.com/#youngstone89/setting-up-environment-variables-in-mac-os-28e5941c771c
I was able to fix the similar error by running npm install create-react-app instead of npm install -g create-react-app. Hope it helps.
you should create .env files
https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env
read this Environments in Create React App
https://serverless-stack.com/chapters/environments-in-create-react-app.html
unset HOST
This worked for me, if not, then run the code and give it a reboot
I ran into this issue because I usually had anaconda running as default in the terminal. So my login is not just my computer login account but appending with some string created by conda. (eg xxx#xxx)
However, in order to get the react server up and running normally you will need to have your login as your computer login id. (eg xxx#)
There are two solutions to achieve this.
to run unset HOST, it will get rid of the string at # of your terminal log in id.
to add HOST as env var to your terminal config file. For zsh user (most likely cos mac now run zsh as default in the terminal) You need to add export HOST="localhost" or export HOST="" to ~/.zshrc and run source ~/.zshrc in the terminal to refresh the new zsh config. You can do the same to bash config file by following one of the answers above.
GOOD LUCK.
Attempting to bind to HOST environment variable: x86_64-apple-darwin13.4.0
If this was unintentional, check that you haven't mistakenly set it in your shell.
This issue comes once we write npm start in terminal, to rectify the issue in your terminal before executing the command npm start write unset HOST then write the command npm start it works fine and you can check on localhost://3000

Using PhantomJS with Karma (Win7 x64)

Does anyone have a simple getting started guide on how to configure Karma to use PhantomJS?
Using the phonecat sample, I have Karma running with Chrome fine and although the Karma docs mention PhantomJS (which I now have installed) I can't figure out how to amend the config file to get it to run.
I've tried putting PhantomJS in the the browsers array of testacular.conf.js but I get;
{ [Error: spawn OK] code: 'OK', errno: 'OK', syscall: 'spawn' }
Which I think means it's launching OK but it appears to me that (as a PhantomJS noob) it requires a different command line. I've also downloaded phantomjs-launcher but it's not obvious how to use that.
(I'm running Windows 7 64-Bit if that makes a difference.)
test.bat
#echo off
REM Windows script for running unit tests
REM You have to run server and capture some browser first
REM
REM Requirements:
REM -NodeJS (http://nodejs.org/)
REM -Testacular (npm install -g karma)
set BASE_DIR= % ~dp0
karma start "%BASE_DIR%\..\config\testacular.conf.js" %*
testacular.conf.js
basePath = '../';
files =[
JASMINE,
JASMINE_ADAPTER,
'app/lib/angular/angular.js',
'app/lib/angular/angular-*.js',
'test/lib/angular/angular-mocks.js',
'app/js/**/*.js',
'test/unit/**/*.js'
];
autoWatch = true;
browsers =['Chrome', 'phantomjs'];
junitReporter = {
outputFile: 'test_out/unit.xml',
suite: 'unit'
};
According to procmon.exe PhantomJS wasn't launching at all, so to circumvent environmental issues, I've since amended my config thus;
browsers = ['Chrome','%USERPROFILE%\\AppData\\Roaming\\npm\\phantomjs.cmd'];
where %userprofile% is expanded, which seems to launch it, but now I get this;
INFO [launcher]: Starting browser %USERPROFILE%\AppData\Roaming\npm\phantomjs.cmd
ERROR [launcher]: Cannot start %USERPROFILE%\AppData\Roaming\npm\phantomjs.cmd
Can't open 'http://localhost:9876/?id=16572367'
events.js:72
throw er; // Unhandled 'error' event
^
Error: spawn OK
at errnoException (child_process.js:975:11)
at Process.ChildProcess._handle.onexit (child_process.js:766:34)
That error seems to be coming from PhantomJS.exe now.
First, install PhantomJS using npm:
npm install -g phantomjs
You may then need to specify the location of the PhantomJS executable for karma. The npm install will tell you where it put the executable. For me, running karma in Git Bash, I added the following to ~/.profile:
export PHANTOMJS_BIN ='C:/Users/JohnSmith/AppData/Roaming/npm/node_modules/phantomjs/lib/phantom/phantomjs.exe'`
Those two steps, plus adding PhantomJS to the browsers entry, were sufficient to get karma to successfully invoke Phantom and run all of my tests.
Use PhantomJS launcher and set env PHANTOMJS_BIN to the correct location of your phantomjs binary. That is phantomjs.exe on windows, not the .cmd file (the cmd file is just a npm wrapper on windows).
In your code, you are using a script browser launcher (a custom shell script to launch a browser). That is possible, but the script has to accept a single argument which is the url that it should open. PhantomJS does not behave like that.
I was seeing this error when using a relative path in node's child_process.spawn() function --
var spawn = require('child_process').spawn;
var child = spawn('phantomjs', ['./suspendmonitors.js']);
The solution for me was to use the absolute path:
var spawn = require('child_process').spawn;
var child = spawn('phantomjs', ['C:/Users/kkhalsa/workspace/misc_scripts/phantomjs/suspendmonitors.js']);
For some reason, the relative path worked when calling the node script from a windows command prompt, but didn't when invoking the node script in Windows powershell.
Are you using cmd.exe or Powershell?
Try manually adding the PHANTOMJS_BIN and point it to the phantomjs.exe, not the .cmd.

Resources