When running a React application, you might encounter an error message that says You need to enable JavaScript to run this app.
This error occurs when you have a wrong configuration either in your browser or your React or Express application. In this article, I will help you fix this error with some known solutions.
1. Set the proxy in package.json file
This error might be solved by defining the proxy configuration in your package.json file.
For example, you can set the proxy to localhost:5000 like this:
"proxy": "http://localhost:5000"
After you define the proxy, restart the React application and see if the error is resolved.
This solution works when you use Express as your server. Adding a proxy allows React to access the server API without any permission issue.
2. Add homepage and URL configuration in Express
If the above solution doesn’t work, try adding the following homepage configuration in your Express project’s package.json file:
"homepage": "."
Save the changes, then open the index.js file or any file containing your routes to add the following lines:
app.use(express.static(__dirname));
app.get("/*", function(req, res) {
res.sendFile(path.join(__dirname, "index.html"));
});
The code above commands Express to serve static files from the directory where the JavaScript file is located.
For any GET request to any path, it responds with the index.html file. This is a common setup for single-page applications (SPAs) where the client-side JavaScript handles routing and rendering different views within the same HTML file.
The server routes all requests to the same HTML file, and the client-side JavaScript takes over from there to determine how to handle the requested path.
This setup should help you solve the React app error.
3. Check that JavaScript is enabled on your browser
I’m very certain that you have JavaScript enabled on your browser, because JavaScript is enabled by default on all browsers.
But if you think that JavaScript is disabled on your browser, then here’s how to check the option for various popular browsers:
Check on the guide for the browser you currently use, and make sure that JavaScript is enabled.
4. Clear all data from the browser
If all else fails, then you can try to clear all data for the website stored in your browser.
Follow the steps below:
- Right click and select Inspect.
- Go to the Application tab.
- Clear all data in local storage, session storage, and cookies.
- Also, go to the Network tab and check the option Disable cache
- Refresh your website.
Sometimes, a cache of the old website might prevent you from getting the latest version of the application.
Open your app againa and see if the error is now resolved.
Conclusion
The error ‘You need to enable JavaScript to run this app’ occurs when you run a React application with invalid configurations.
Most of the time, React can’t connect to the Express API that you used as the server-side of your application. Adding the proxy configuration should fix this error, but if you still see it, then you can try the other solutions mentioned above.
I hope this article helps! I have some more articles related to the React library here:
Happy coding and see you in other articles!