react-native start command stuck on Loading dependency graph, done. Running Metro Bundler on port 8081.
Windows 8 :
node version : 8.11.3
npm version : 6.3.0
react-native: 0.56.0
package.json
{
"name": "TestApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.4.1",
"react-native": "0.56.0"
},
"devDependencies": {
"babel-jest": "23.4.2",
"babel-preset-react-native": "5.0.2",
"jest": "23.5.0",
"react-test-renderer": "16.4.1"
},
"jest": {
"preset": "react-native"
}
}
It's supposed to get stuck there until a device successfully connects to it. The problem is probably that your device for some reason is unable to find your computer, in that case you should get an error message on the phone mentioning it can't connect to the development server. All those suggestions mentioned in that error message may help you solve the problem. Pay extra attention to the development server's host and port configuration. If you have configured the host and port a long time ago and it suddenly stopped to work, a likely cause could be that your computer has been assigned a new ip address, so maybe double check that you're using the correct IP address. Another problem may be that your computer isn't publicly visible on your network.
Try this.
Your device can't found localhost like Lenny Laughter said, and the solution to that is running adb -s <device name> reverse tcp:8081 tcp:8081.
This way, your device can see the port 8081 and connect to the Metro Bundler.
You need to start the app on your physical device or emulator.
Related
I have an application with React on frontend and .Net Core on backend and i am trying to debug my react frontend, without extensions and attaching to the process, but i am getting the message error bellow:
Cannot connect to the target at localhost:3000: Could not connect to debug target at http:localhost:3000: Could not find any debuggable target.
I'm using this launch.json:
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug FrontEnd",
"port": 3000,
"request": "attach",
"type": "chrome",
"webRoot": "${workspaceFolder}"
},
{
"name": "Debug BackEnd",
"type": "coreclr",
"request": "attach"
}
]
}
I start my frontend using npm start witch is basically react-scripts start.
Obs.: Iḿ using opera browser.
I found a workaround.
This problem only occurs when I run with sudo npm start.
When running it with just npm start I got this message:
"Unhandled exception. System.IO.IOException: The configured user limit (128) on the number of inotify instances has been reached, or the per-process limit on the number of open file descriptors has been reached."
So I solved it increasing the fs.inotify.max_user_instances with this command:
echo fs.inotify.max_user_instances=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
I found this solution by the answer of #Creak . To see more details, click this link
After a search, all I could found was this issue.
Although Opera is now based on Chromium, it's not possible to debug it using VSCode yet. Maybe someone can come with a kind of workaround for it.
I setup a new project using Yarn and NextJS on my Windows machine today. Upon start-up, I get an error that the casing is "invalid" for my project directory. Specifically, I am seeing the following errors:
Invalid casing detected for project dir, received c:\super-amazing-project actual path C:\super-amazing-project
There are multiple modules with names that only differ in casing.
The kicker is that in the error message the two paths are identical except for the drive letter.
How do I fix this?
Versions
Yarn version 1.22.17
NextJS version 12.1.5
Console output
c:\super-amazing-project>yarn dev
yarn run v1.22.17
$ next dev
warn - Invalid casing detected for project dir, received c:\super-amazing-project actual path C:\super-amazing-project, see more info here https://nextjs.org/docs/messages/invalid-project-dir-casing
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
./node_modules/react/cjs/react.development.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* C:\super-amazing-project\node_modules\react\cjs\react.development.js
Used by 2 module(s), i. e.
C:\super-amazing-project\node_modules\react\index.js
* c:\super-amazing-project\node_modules\react\cjs\react.development.js
Used by 2 module(s), i. e.
c:\super-amazing-project\node_modules\react\index.js
package.json
{
"name": "super-amazing-project",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#chakra-ui/react": "^1.8.8",
"#emotion/react": "11",
"#emotion/styled": "11",
"framer-motion": "6",
"next": "12.1.5",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-icons": "^4.3.1"
},
"devDependencies": {
"#types/node": "17.0.25",
"#types/react": "18.0.6",
"#types/react-dom": "18.0.2",
"eslint": "8.13.0",
"eslint-config-next": "12.1.5",
"typescript": "4.6.3"
}
}
You probably changed the case of the drive letter on Windows in the command terminal by using a command like cd c:\super-amazing-project and then setup a project with a lowercase Windows drive letter. This causes strange issues like the ones you're experiencing.
Solution 1. Change the case of the drive letter and try yarn dev again
You can change the case of the drive letter on Windows using the cd command like this
C:\super-amazing-project>cd c:\
c:\>cd super-amazing-project
c:\super-amazing-project> yarn dev
Solution 2. Setup your project again using the default uppercase drive letter
Installing with the non-default lowercase drive letter on Windows may have placed your new project in a bad state. If this project is fresh, it may be easier to just run npx create-next-app again and copy your project files.
So, I am developing React portlet for Liferay 7.0 CE. I have used blade command ( straight from the Liferay react template)
blade create -t npm-react-portlet -p fi.liferay.react.portlet -c ReactMain TestProject
Blade creates project as it should. After creation I changed to newly created project and ran
./gradlew build --stacktrace
First time build prints
npm WARN deprecated babel-preset-es2015#6.24.1: 🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
And after that
Execution failed for task ':npmRunBuild'. > Process command '<pathToProject>/build/node/bin/node'' finished with non-zero exit value 1
-> Build failed.
When running again gradle build, build passes
When deploying to Liferay portal, browser console prints
ReferenceError: module is not defined[Learn More]
combo:1:1
Error: Load timeout for modules: TestProject#1.0.0
Stack trace:
require/</</s<#http://localhost:8080/o/frontend-js-web/everything.jsp?browserId=firefox&themeId=classic_WAR_classictheme&colorSchemeId=01&minifierType=js&minifierBundleId=javascript.everything.files&languageId=en_US&b=7004&t=1521557570840:288:322
I am using npm version 5.6.0 and Node version 9.8.0 . Blade CLI version is 2.3.1.201711201552
Operating system is MacOs High Sierra Version 10.13.3
I have tried with new portal and with Google Chrome and Mozilla firefox
It caused by the upgrade of liferay npm build tools.
It will be fixed after the new release of blade cli.
And you can also fix it by change your package.json file like the following:
{
"dependencies": {
"react": "15.6.2",
"react-dom": "15.6.2"
},
"devDependencies": {
"babel-cli": "6.26.0",
"babel-preset-es2015": "6.24.1",
"babel-preset-liferay-project": "1.6.1",
"babel-preset-react": "6.24.1",
"liferay-npm-bundler": "1.6.1",
"liferay-npm-bundler-preset-react": "1.6.1"
},
"main": "js/index.js",
"name": "npm-react-portlet70",
"scripts": {
"build": "babel --source-maps -d build/resources/main/META-INF/resources src/main/resources/META-INF/resources && liferay-npm-bundler"
},
"version": "1.0.0"
}
Hope that can fix your problem.
I am getting invalid host header problem while i am trying to server my application by ng serve --host 0.0.0.0 . I have tried the following.
1.install -g angular-cli
2. cd to that app-directory
3. change port in angular-cli.json
"defaults": {
"styleExt": "css",
"component": {},
"serve": {
"port": 1337
}
}
ng serve --host 0.0.0.0
Requested url in browser is http://port-1337.angular2-jobproject0889272.codeanyapp.com/
I was looking to sovle a different problem and came across an answer that may work for you.
ng serve --port 8080 --host 0.0.0.0 --disableHostCheck true
Angular-cli GitHub
If I'm understanding your question correctly, your issue could be stemming from Webpack's security impl.
As the Angular CLI uses Webpack by default to bundle your app, you have to abide by its requirements when using "ng serve". App bundles produced by Webpack now require the Host header of the request to match the listening address OR the host provided in the public option.
The public option is a --public flag passed with the "ng serve" command. On CodeAnywhere you should most likely care to indicate a port # as well. A valid "ng serve" command could look like this:
$ ng serve --host 0.0.0.0 --port 3000 --public myproject-myusername.codeanyapp.com
(For HTTPS service, CodeAnywhere requires you use port 3000)
You can find your specific value for the --public flag in your CodeAnywhere IDE by right-clicking on your project's tree view Connection icon and selecting the "info" option.
To simplify things, you can set this up in your package.json file and then start the Angular server with the command:
$ npm start
For example, you can modify the "start" element of the package.json "scripts" entry as follows:
"scripts": {
"ng": "ng",
"start": "ng serve --host 0.0.0.0 --port 3000 --public myproject-myusername.codeanyapp.com"
}
Hopefully this info is applicable to the issue you are facing. Good Luck!
Hi I am working on reactJS
Would Like to understand how can I run my local React app running on http://localhost:8888/index.html#/?_k=pu9k2u through my IP address on some other machine ?
Whenever I do a "npm start" it always runs on localhost:8888
How do I change it to run on 0.0.0.0:8888 ?
I know how to change the port for the app,
Following is my webpack.congif.js
module.exports = {
entry: './index.js',
output: {
filename: 'index.js',
path: ''
},
devServer: {
inline:true,
port: 8888
},
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
]
}
}
Since I am very new to reactJS kindly explain the solution given below or provide with an updated webpack.config.js
How to make the webpack dev server run on port 80 and on 0.0.0.0 to make it publicly accessible?
only by adding host: to webpack.config.js it worked for me
devServer: {
host:'000.000.00.00',
port: 8888
},
then i started react code by giving
webpack-dev-server --host 000.000.00.00 --port 888
You need to change hosting of the react application from localhost to your local ip address. (For example 10.10.54.124), you can get it using ipconfig command in Windows command prompt.
Next you need to open your port (ex. 214) via firewall, to access from the 3rd-party machines. And after that, all of the people, how are in your local, or VPN network can access your application by link 10.10.54.124:214.
P.S. That would work only for people how are in your local network
This is what I do: instead of using an IP address I tell node to use the local hostname of the computer. This is done in the package.json file in the scripts section with the HOST param, there is a PORT param too:
{
...,
"scripts": {
"start": "node scripts/start.js",
"start-local": "HOST='BlueLight.local' node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom",
....
}
...
My hostname is BlueLight so my local address is BlueLight.local, open the terminal and write hostname command to find out yours.
So any computer in my local network can open http://BlueLight.local:3000 you can even use mobile phones, and I even use iPhone or Android simulators.
Bear in mind that some security checks like WebRTC, live camera, and other https checks will not work since you don't have a SSL certificate for your local address. Some of them can be deactivated in the advanced settings of your browser.