Default React Component not rendering (Create-React-App)

Question

UPDATE: This problem has been solved by simply using a different browser. I was originally using Microsoft Edge as that is what NPM Start automatically opened. For some reason it appears to work perfectly when manually pasting localhost:3000/ into Chrome.

I am brand new to React and I am trying to set up a basic test project. I have been following some tutorials, this one in particular https://www.youtube.com/watch?v=sBws8MSXN7A My issue is that for some reason when I try to test the basic boilerplate I don't see anything from the basic component. From what I understand there should just be a basic logo, but my page is completely blank. I don't know what code is relevant to post since I am very new so if you think something might help then let me know what you would like.

Here is what I have done:

In Windows Powershell I ran npx create-react-app todolist

This created a new react app in a folder called todolist.

I moved into the todolist folder in Powershell using the cd command.

From here I ran npm start

This opened a new microsoft edge window at localhost:3000/ It has the title of React App on the tab, but there is no content on the page.

From what I understand there should be a logo here.

I opened the console and it says this:

HTML1300: Navigation occurred. localhost:3000 (1,1)

[HMR] Waiting for update signal from WDS...

SCRIPT5022: SCRIPT5022: SyntaxError 0.chunk.js (3857,1)

I don't know if that is relevant but I might as well add it.

Any help on this would be greatly appreciated. I have been Googling about this for over an hour and cannot figure out what is going on.

Yes it does.... When I put localhost:3000/ into my chrome browser the page appears to load as intended. For some reason Edge didn't work. Damn do I feel dumb for not thinking to try that. Thanks a ton for the help! — skellyton3
– skellyton3, Commented Dec 30, 2019 at 21:01
i tried to find a solution for this and i tried the suggested solutions and none worked. From what I'm seeing react simply doesn't support Edge. I've installed the polyfill and imported it to index.js and nothing. wrote this comment to receive notification if a solution was found for this — laserany
– laserany, Commented Dec 30, 2019 at 21:58

hotpink · Accepted Answer · 2019-12-30 21:08:32Z

1

delete your node_modules folder
update your package.json

"development": [
  "last 1 chrome version",
  "last 1 firefox version",
  "last 1 safari version",
  "ie 11" // <-- add this
]

run npm i

answered Dec 30, 2019 at 21:08

hotpink

3,2861 gold badge14 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

skellyton3 Over a year ago

I tried this and it still did not work on edge. I have been able to get it to work using Chrome though.

hotpink Over a year ago

try using the values from "production" property.

Collectives™ on Stack Overflow

Default React Component not rendering (Create-React-App)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related