CODEWITHSUNDEEP
javascriptnode.jsreactjs
Jagdeesh Kumar
Jagdeesh Kumar

Reputation: 1760

I am getting error in console "You need to enable JavaScript to run this app." reactjs

I am new to reactjs, I am working on a app. It was running fine, but when I've run npm run build command, I am getting error "You need to enable JavaScript to run this app.". I have made changes in server.js file even I've given "homepage": "./", but it did not solved my issue.

And I've checked by running laravel project, javascript is enabled in browser, also tried different browsers.

Someone please help me to overcome this error.

Upvotes: 109

Views: 504013

Answers (20)

Abhishek
Abhishek

Reputation: 1120

Sometimes it could be a simple case like missing right URL of the server in your files like constants or env where you have setup constants for Server url

Upvotes: 0

Ronald Wilson
Ronald Wilson

Reputation: 1

This is a bug in react I would say as a noob but you can cross-check the elements even in a proper code and you will see this error. Therefore do not search for a fix for the error rather fix your code for other possible issues like API related.

Upvotes: 0

MGOwen
MGOwen

Reputation: 7259

In my case, this issue was caused by a simple Javascript error, BUT because npm start built and ran with no errors or warnings, I didn't know there was an error. So I was stuck for hours.

I finally found the Javascript error in the browser's console, so check there.

(You can view the javascript console in your browser of choice, usually by right clicking on the page and choose Inspect).

Upvotes: -1

Mr. Vanderstelt
Mr. Vanderstelt

Reputation: 126

Spent the entire day troubleshooting this error for a React application on AWS using an ALB that forwards traffic from HTTPS to HTTP to a Docker container on ECS. The mistake I made was on the path-based forwarding rule to the target.

# Mistake
if path = “/“ then forward to target
# Corect
if path = “/*” then forward to target

The issue is that scripts referenced in index.html (from npm run build) did not resolve on a full DNS (such as https://example.com/static/js/main.js) and resulted in a 503 error in browser console for some reason. I saw tons of answers on other posts on the subject, but this was not one of the answers, so had to take the time to post about it. Because it wasn’t the React application at all - it was the application load balancer, so if any of this sounds familiar, take another look at your ALB… it might save you 8 hours if you just include that little star!!!

Upvotes: 0

santuarium
santuarium

Reputation: 1

It is case sensitive. Needs to start with upper case:

const router = createBrowserRouter([
    {
      path: "/",
      element: <**I**ndex />,
      errorElement: < ErrorPage />,
    },{
        path: "/login",
        element: < **L**ogin />,
    },{
        path: "/register",
        element: < **R**egister />,
    }
]);

Upvotes: -2

Peret
Peret

Reputation: 75

I had same problem right now. I forgot to bring ${REACT_APP_API}

before error

const res = await axios.get(`/api/products`)
console.log(res.data)

final solution

const res = await axios.get(`${process.env.REACT_APP_API}/api/products`)
console.log(res.data)

Upvotes: -1

Meenal Jain
Meenal Jain

Reputation: 33

I had been struggling with this issue the whole morning and after trying all the different hacks of setting up proxy and homepage, it still did not resolve.

And then I checked my js files, and because there was an error which was not being caught while npm start, it was not enabling javascript internally.

How I got to know that this did resolve the issue: Stopping the current run and correcting the issue that was there and then rerunning the server.

Upvotes: 1

Shreehari
Shreehari

Reputation: 359

Had the same issue, when I was trying serve react static files in node js server. Was missing the following in index.js of server side code.

app.use(express.static(path.resolve(__dirname, '../client/build')));

Upvotes: 0

subhajit das
subhajit das

Reputation: 445

after adding proxy in react package.json restart the reacr server. This works for me.

Upvotes: 3

sarath chandra
sarath chandra

Reputation: 311

If you are facing the error "You need to enable JavaScript to run this app." in reactjs then 9/10 times there is an issue with your API call. Please cross check API url string, parameters, action type, endpoints, action names, controller names and API call status. You'll be able to find the issue. verify endpoint url again and again. You'll definitely find a solutions. Also check ur VPN access if you're able to hit the end point.

Go to console --> network tab and see ur API status

Upvotes: 2

Erkam D.
Erkam D.

Reputation: 79

In your react project folder install serve if you haven't installed it before;

npm install -g serve

Then serve your project with a static server;

serve -s build

The build is a folder generated by 'npm run build'.

That's it! Visit

http://localhost:5000

by default.

Upvotes: 0

Jangya satapathy
Jangya satapathy

Reputation: 906

Just make sure that this route must be appeared after at all other routes

app.get("/*", function (req, res) {
   res.sendFile(path.resolve(__dirname, '../client/build', 'index.html'));
})

Upvotes: 5

Ankit Garg
Ankit Garg

Reputation: 149

Try to run in other browser and see if it is working.

If it works there then please try below things and refresh your website.

  1. Right click and select Inspect.
  2. Go to Application Tab.
  3. Clear everything from local storage, session storage and cookies.
  4. Refresh your website.

This resolved similar issue in my case and hope it will work for others.

Upvotes: 3

mostlyAsking7179
mostlyAsking7179

Reputation: 204

I received this error because an API call that I was making was being blocked because of an invalid API key.

Upvotes: 4

skedwards88
skedwards88

Reputation: 409

Also a react newbie, I hit this issue. Remembering to add ReactDOM.render(<MyClassName />, document.getElementById("root")); fixed it for me.

Upvotes: 0

Philipedia
Philipedia

Reputation: 71

Go to your SignIn component or Register component, change the form tag to a div tag OR prevent the form default i.e (e.preventDefault). Also make sure that Javascript is enabled in your browser.

Upvotes: 1

Denys Bushuliak
Denys Bushuliak

Reputation: 345

I had same problem. My workable solution:

package.json:

"homepage": "."

index.js:

app.use(express.static(__dirname)); //here is important thing - no static directory, because all static :)

app.get("/*", function(req, res) {
  res.sendFile(path.join(__dirname, "index.html"));
});

Upvotes: 20

Leo Lozes
Leo Lozes

Reputation: 1388

I had some cookies set in the same url (localhost:8080), probably from a previous development, and it was somehow messing with my React project. I only found out because (out of despair) I tried with another browser and it worked. I deleted the cookies and it worked perfectly.

Upvotes: 0

MaxWidth
MaxWidth

Reputation: 518

I received this message when no proxy to the server was specified inside client package.json file.

"proxy": "http://localhost:5000"

(where 5000 should be changed to whatever port number the server was setup to listen to. In my case it also required server restart once added)

Upvotes: 28

Paulo Cuellas
Paulo Cuellas

Reputation: 21

I had the same problem. In my case, the class name wasn't following the patterns (must starts with uppercase). As soon as I corrected it everything started to work well.

Upvotes: 1

Related Questions