When I am starting a react app by "npm start" command in VScode terminal, it starts to loading forever on the browser. I am completely new to that so I have no idea what and where could go wrong. I have read that it may be because of mistakes in code so I deleted all the things which caused "compiled with warnings", but even though now terminal says "compiled successfully", nothing changed. In the browser it is stuck on loading...
Note that the development build is not optimized. To create a product build, use npm run build.
Does it have something to do with a problem? Looking forward to understand better what is going on. Thanks!
Update: so I loaded an index.html file through live server extension in vscode and opened up developer tools and I saw a bunch of problems, which are all referring to a syntax error in the very beginning of the initial htmls code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
That is what I see on dev tools:
Also, I tried "git status" in git bash and I see "nothing added to commit but untracked files present (use "git add" to track)" and it lists ALL of the files from my user folder.
Important note: earlier it was all fine and never have I ever seen all of these folders in a bash after running git status. Plus, I was even able to render react app.
I accidentally deleted the package.json. Restoring it solved my problem.
the main problem are:
You create an infinite Component, nesting the parent component in the parent component
https://i.stack.imgur.com/ngl1s.png
You import the wrong Component path so that it creates a nesting Component
double-check your path is exactly correct
or check by Comment your code, circling the Component that makes an error then fixing it
so if you can't solve it remember your Component is nesting, then it makes infinite localhost loading
I solved by myself
Related
According to this site:
https://developers.tron.network/docs/tronlink-integration
I am suppose to be able to connect ANY website to TronWeb, following this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button onclick="gettronweb()">Can you get tronweb from tronlink?</button>
<script>
function gettronweb(){
if(window.tronWeb && window.tronWeb.defaultAddress.base58){
document.write("Yes, catch it:",window.tronWeb.defaultAddress.base58)
}
}
</script>
</body>
</html>
This however does not work when I try to do it, could somebody explain to why?
I have tronlink (Chrome extension) installed, and it works on all other sites, so that's not the issue.
Or am I missing something?
you need to install tronweb and use the methods provided . that example is kind of just like a skeleton to show you how it would be called . but there needs to be more then just that file.
im newer then you most likely at coding lol so i am probably wrong just giving my 2cents
It might seem that Tronlink requires a SSL server before running....
Works on a SSL certified server....
Tron Development seems tricky somehow for new users with lack of proper documentation.
Unlike Web3/Metamask which can work on localhost itself for checking and development tron seems to not work with "insecure" network/server.
You need a SSL certified server in-order to run it properly (yes its strange might be for some security ! who knows).
What i did while testing is created a JS file where i've written all tronlink (TronWeb Extension) related code and used "index.html" file to interact with it (For some reason !)
Now what I did was hosted this index.html file along with my JS code for tronlink interaction to Github Pages ! Yes for free + you get Github's SSL pre installed server and that's enough for your program to run and test.
Note: Github pages needs your repository to be kept public inorder to host it. (Not preferred for private projects)
You can also host it in your personal AWS with SSL certificate or any other Servers with SSL certificate.
Hope this helps all with this same issue !
Bootstrapped with create-react-app (v1.0.13). Whenever I update the source & redeploy users need to hard refresh to get the new content. I've included non-cache header in index.html:
<meta http-equiv="Cache-Control" content="no-store" />
& turned off provided service workers. Also change the .js filename (and reference in index.html) in build folder before deploying.
I was able to remove caching by doing the following:
adding the following to in index.html
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
inserting the following to the js
import { unregister } from './registerServiceWorker';
unregister()
changing cloudflare caching expiration to 'respect existing headers' at https://www.cloudflare.com/a/caching/
It is unclear which of these (or all of these) are actually required but it's a start.
For anyone coming in the future -- all you need is the
{unregister} from ./registerServiceWorker
unregister();
This helped my create-react-app work with hosts like gh-pages and netlify.
I'm trying to build my react app using react's build tool. When I try to "npm start", the app works fine.
npm start
On http://localhost:3000 => I can access the application.
But when I build the application and try to access "index.html" file on the build folder, it doesn't work and I encounter with a white blank screen.
npm run build
http://myreact-app/build/index.html => White blank screen.
This is the build folder which has been created after run npm run build.
And this is the index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="/manifest.json">
<link rel="shortcut icon" href="/favicon.ico">
<title>React App</title>
<link href="/static/css/main.9a0fe4f1.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src="/static/js/main.46d8cd76.js"></script>
</body>
</html>
Am I doing something wrong? Can't I access the built index.html file on my apache web server?
Probably you've not noticed yet but I don't think your html file is able to import css and script files correctly. When I look at your file structure, I see the everything about build is under the build folder. But in your html file, there are slashes ("/") before the file paths. That's why browser is looking for those files under the parent of the "build". Try to remove slashes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico">
<title>React App</title>
<style></style>
<link href="static/css/main.65027555.css" rel="stylesheet">
</head>
<body
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src="static/js/main.316f1156.js"></script>
</body>
</html>
The above problem can be overcome if you add
"homepage":".",
in your package.json. This is not official but a good hack to follow.
https://github.com/facebookincubator/create-react-app/issues/1487
To fix this problem go to your build folder then you will see manifest.json file, open it and you will see your manifest.json have:
"start_url": ".",
change it to
"start_url": "/",
there is alternative way to fix the problem:
before your react project build go to your package.json file and specify homepage property with . value or maybe with your site base url, see example:
{
....
"homepage": ".",
......
}
you should try use the serve package here to run single page app.
npm install -g serve to install globally
serve help to see help texts
serve --single build to serve single page app. I server will be started from which you can access your react app
If nothing of above works. Maybe the problem is that you are using react-router-dom and the routes needs a special compilation generating individual htmls for each page that exists in your router config.
Ref:
I'm using create-react-app and I need to open build/index.html in browser directly without a server
In summary you need to use <HashRouter> instead <Router> and a <Switch> wrapper to your routes. For example:
<Switch>
<Route exact path='/' component={WelcomePage} />
<Route exact path='/game' component={GamePage} />
</Switch>
Consider that your routes will change to:
http://localhost:3000/#/ -> Root page
http://localhost:3000/#/game -> Other page
You need to install local server plugin/extenstion.
If you are vscode user then search live server extension and install it. Then there will be "Go live" option in bottom of your editor.
For other editor user (atom/sublime) search for live server plugins.
Sometimes the reason that the content is not served is because the command of "serve -s" was executed from outside of the build directory. The correct way is to go into the build directory then execute "serve -s" from therein.
I had an index.php in the webroot which prevented my app from running index.html.
I use HashRouter instead BrowserRouter & also need to add /# infront of every url like this:
href={`/#/blogs/${slug}`}
this works for me , thanks
Try using <HashRouter> instead of <Router>, and don't forget to import {HashRouter}.
I have several tests that write HTML code to a temp directory on a CentOS 7 box and then have Chromedriver load them up to do some basic tests on them. In this example I am writing the HTML code:
<html><body><form> <label for="text">Text</label>
<input type="text" id="text"></form></body>
However when I get the HTML content via getAttribute('innerHTML') I get this
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<title i18n-content="title">file:///tmp/formJbDsBv</title>
...
which is clearly not the code I wrote. The log file on the Selenium side is
09:45:03.980 INFO - Executing: [get: file:///tmp/formJbDsBv])
09:45:04.084 INFO - Done: [get: file:///tmp/formJbDsBv]
But, of course, the test works locally and on a virtual machine, but not on my test box, which runs using Xvfb.
Plus, the technique I use works on about a hundred other tests.
I don't know why this solves it, but adding .html to the end of the filename made it work. This is really weird because some of the tests that passed did not have .html at the end of their filename. Weird, but it's working now.
I am using servereless to deploy me backend and front end. My front end is using create react app. I believe after I made the following changes
<img className="svg-width" src="/img/Icons/photographer-camera.svg" alt="camera icon" />
<img className="svg-width" src="/img/icons/photographer-camera.svg" alt="camera icon" />
Where I changed Icons/ to icons/ I get the following issue:
Uncaught SyntaxError: Unexpected token <
In my s3 bucket I navigate to img/ and verify that my directory is also lowercase for icons.
The file in question of the syntax error is main.977eb738.js under /static/js/main.977eb738.js of my domain. But when I go to my bucket I don't see that js file. I see
The code in the file its complaining about is the index.html in public/index.html in the create react app boilerplate.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#000000">
<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&libraries=places"></script>
<script src="https://js.stripe.com/v3/"></script>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
One more thing to note is this works fine locally and even on mobile. I thought this could be cloudfront caching so I waited a full day and still cannot get to the bottom of this error.
I ran into the same issue. I tested incognito and the site worked fine in inco after doing a cache invalidation the same way that Michael stated in the first comment. It looks like it is browser caching alongside the Cloudfront caching.
I was able to resolve the issue by clearing browser cookies/data from the last day.
I would recomend anyone who is uploading directly to AWS S3 bucket to clear the CloudFront edge cache.
Using AWS CLI this can be done with the folowing line:
aws cloudfront create-invalidation --distribution-id YOURID --paths "/*"
In order to find the CloudFront Distribution Id navigate to cloudFront in AWS console.
Read more here: Invalidating Files
In my case, my CloudFront distribution was blocking access to all /static/* files. Creating a CF behavior that whitelisted that path resolved the issue.
I faced a similar issue. I wasn't using serverless(AWS lambda).
What was happening was that inside my build/index.html somehow it was failing at the link's hrefs, and script's src tag.
So, I had <link href="/static/css/main.866f5359.chunk.css" rel="stylesheet"> and I changed it to
<link href="https://s3-us-west-2.amazonaws.com/fullthrottle-labs-react-task/static/css/main.866f5359.chunk.css" rel="stylesheet">, similarly for scripts as well.
So, instead of giving relative paths in build/index.html, giving an absolute path did the trick for me.