We Keep Coding

React native Error: The HTTP/S server is already being used by another WebSocket server

I'm trying to run yarn start, not working for me. I have tried changing port but it gives the same result.
┌──────────────────────────────────────────────────────────────────────────────┐
│ │
│ Running Metro Bundler on port 8084. │
│ │
│ Keep Metro running while developing on any JS projects. Feel free to │
│ close this tab and run your own Metro instance if you prefer. │
│ │
│ https://github.com/facebook/react-native │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
warning: the transform cache was reset.
master/node_modules/ws/lib/websocket-server.js:83
throw new Error(
^
Error: The HTTP/S server is already being used by another WebSocket server
at new WebSocketServer (/node_modules/ws/lib/websocket-server.js:83:15)
at InspectorProxy._addDeviceConnectionHandler (/node_modules/metro-inspector-proxy/src/InspectorProxy.js:220:17)
at InspectorProxy.addWebSocketListener (/node_modules/metro-inspector-proxy/src/InspectorProxy.js:175:10)
at Server.<anonymous> (/node_modules/metro/src/index.js:265:28)
at Object.onceWrapper (node:events:509:28)
at Server.emit (node:events:390:28)
at emitListeningNT (node:net:1368:10)
at processTicksAndRejections (node:internal/process/task_queues:82:21)
Please help! Thanks in advance!

This may happen for a few reasons:
You have run the app using react-native run-android or directly from Android Studio (or XCode). When running this command, if the Metro bundler server is not active, it will start it. Doing so, it open the default Terminal.app on Mac and appear in your recent app if not pinned. So if you run manually afterward yarn start the port will already be used.
You are trying to start a second Metro bundler on the same port.
Recommanded solution
Find the already running server on this port using
sudo lsof -i :8084
Kill it
kill -9 <PID>
Alternative
Change the Metro port.
react-native start --port 8088
You'll need to access the developer menu on each app re-install to change the bundler location: localhost:8088 for example.

Create React App with Storybook creating webpack issue

So I have a large React app created and set up with Create React App. Recently we started using Storybook to work on and create components. Its been great. However, we keep getting this weird webpack issue when we try to run or build the app. Here is the console log out:
> react-scripts start
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"webpack": "4.41.2"
Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:
/Users/alexanderkaran/Documents/ClimateClever/cc_school_web/node_modules/webpack (version: 4.41.5)
Manually installing incompatible versions is known to cause hard-to-debug issues.
If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact order:
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:
5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.
6. Check if /Users/alexanderkaran/Documents/ClimateClever/cc_school_web/node_modules/webpack is outside your project directory.
For example, you might have accidentally installed something in your home folder.
7. Try running npm ls webpack in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed webpack.
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.
P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! cc_school_web#0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the cc_school_web#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/alexanderkaran/.npm/_logs/2020-01-23T05_20_16_003Z-debug.log
alexanderkaran#AlexandersMBP2 cc_school_web %
I know what your thinking you must have installed webpack, well I didn't. When I run:
npm ls webpack
I get this log out:
cc_school_web#0.1.0 /Users/alexanderkaran/Documents/ClimateClever/cc_school_web
├─┬ #storybook/react#5.3.8
│ ├─┬ #storybook/core#5.3.8
│ │ ├─┬ corejs-upgrade-webpack-plugin#2.2.0
│ │ │ └── webpack#4.41.5 deduped
│ │ └── webpack#4.41.5 deduped
│ └── webpack#4.41.5
└─┬ react-scripts#3.3.0
└── webpack#4.41.2
alexanderkaran#AlexandersMBP2 cc_school_web %
So the issue seems to be to do with storybook. If I uninstall all npm modules and remove storybook, then re-add both everything works again but eventually, it breaks.
Does anyone have a fix for this? Or am I missing something?

Looks like this an issue with the version of Webpack Create React App uses being a few steps behind the version Storybook uses sometimes.
There is no fix, but there are some workarounds.
You can find more info on the issue here:
https://github.com/storybookjs/storybook/issues/6505
One workaround is to add SKIP_PREFLIGHT_CHECK=true to a .env file in your project.
This can cause issue though.
Another workaround is to keep using a version of storybook and create react app that works with each other and doesn't cause these issues. So do not just upgrade storybook straight if it contains a Webpack version bump.

npm missing package error

When I build my js application, I get error that a package(say A#0.94.2) is missing.
I do:
npm list A
This gives me a tree structure like this:
├── A#0.94.2
└─┬ B#0.94.3
└── A#0.94.2 deduped
What does it mean?
Also, it seems A#0.94.2 is available, so why do I get error?
Edit: NPM verions is 5.6.0

Need help installing node-dev

I am new to node.js and I am trying to install node-dev. Everytime I try to install I get his following error message:
npm WARN deprecated object-keys#0.2.0: Please update to the latest object-keys
/usr/local/bin/node-dev -> /usr/local/lib/node_modules/node-dev/bin/node-dev
node-dev#2.6.1 /usr/local/lib/node_modules/node-dev
├── filewatcher#1.1.2
├── resolve#1.1.6
├── node-notifier#4.1.2 (which#1.0.9, shellwords#0.1.0, clone#0.1.19, growly#1.2.0, semver#4.3.3)
├── dynamic-dedupe#0.2.0 (xtend#2.0.6)
└── dateformat#1.0.11 (get-stdin#4.0.1, meow#3.1.0)
I know it didn't install because when I run a script, it brings me back to the command prompt, instead of waiting for a change in file for it to restart automatically.
Any help would be really appreciated. Thanks!

karma junit report crashing

I am trying to run karma on a project, and its crashing on running the junit report, although it works with the same project in a similarly configured machinne.
When trying to run
karma start '<path-to>/karma.conf.js' --reporters junit --single-run --junitReporter.outputFile karmaoutpu
And I am getting this traceback:
INFO [karma]: Karma v0.12.17 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.2 (Linux)]: Connected on socket fAqoa8mrX6WgaHTam1Ut with id 5898608
ERROR [karma]: [TypeError: Cannot call method 'push' of undefined]
TypeError: Cannot call method 'push' of undefined
at [object Object].onBrowserStart (<project-path>/node_modules/karma/lib/reporters/base.js:14:20)
Checking that base.jsfile, I have this snippet:
this.onRunStart = function() {
this._browsers = [];
};
this.onBrowserStart = function(browser) {
this._browsers.push(browser); // <this._browsers is undefined here!>
};
If I force the initiation of the this._browsers array inside onBrowserStart,
I get other errors elsewhere - but this tells me that onRunStart is not being called -
so I am probably missing some initialization. What could be that it fails, being that
the same project, with the same versions of Node packages work in an Ubuntu system (I am on Fedora 20)
The dots reporter plug-in, on the other hand, works flawlessly.
Versions for karma, and karma related packages installed:
karma 0.12.17
├─┬ karma-chai#0.0.1
│ └── chai#1.6.1
├── karma-chrome-launcher#0.1.4
├─┬ karma-coffee-preprocessor#0.1.3
│ └─┬ coffee-script#1.7.1
│ └── mkdirp#0.3.5
├── karma-firefox-launcher#0.1.3
├── karma-html2js-preprocessor#0.1.0
├── karma-jasmine#0.1.5
├─┬ karma-junit-reporter#0.1.0
│ └── xmlbuilder#0.4.2
├── karma-mocha#0.1.6
├── karma-phantomjs-launcher#0.1.4
├── karma-requirejs#0.2.2
├── karma-script-launcher#0.1.0
...
├─┬ phantomjs#1.9.2-2

It turns out the issue was caused by an old version of the junit-reporter module - the version I had didn't work with the new karma version - the other developers which didn't face the issue were running an older karma as well.
It is documented on the project here:
https://github.com/karma-runner/karma-junit-reporter/issues/11