Need to enable JavaScript to run this app error [Fixed]
In this post, we will give you information about Need to enable JavaScript to run this app error [Fixed]. Here we will give you details about the Need to enable JavaScript to run this app error [Fixed] And how to use it also give you a demo for it if it is necessary.
The React.js error “You need to enable JavaScript to run this app.” occurs for multiple reasons:
- Forgetting to configure your proxy on the client side.
- Having JavaScript disabled in your browser.
- Having stale cookies, local or session storage.
Configuring your React.js proxy correctly
If you proxy your requests, the first thing you should try is to set the proxy
property in your package.json
file.
The property should point to the server that proxies your requests.
"proxy": "http://localhost:5000",
Make sure to replace http://localhost:5000
with the fully-qualified URL to your proxy server.
proxy
property in your package.json
file.The example above assumes that there is a proxy server running on localhost port 5000
.
Here is the basic Express.js proxy server that demonstrates how this works.
const express = require('express');
const app = express();
const port = 5000;
app.get('/', (req, res) => {
res.json({site: 'bobbyhadz.com'});
});
app.get('/books', (req, res) => {
res.json(['book 1', 'book 2', 'book 3']);
});
app.listen(port, () => {
console.log(`Example app listening on port ${port}`);
});
Notice that the server is configured to run on port 5000
.
I’ve installed Express and started my proxy server by running the following commands.
# 1) install express
npm install express
# 2) start express proxy server
node index.js
Here is the App.js
file from my React.js application that makes an HTTP request through the proxy server.
import {useEffect} from 'react';
function App() {
useEffect(() => {
fetch('/books')
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
}, []);
return (
<div>
<h4>bobbyhadz.com</h4>
</div>
);
}
export default App;
Notice that instead of passing a complete URL to the fetch()
function, I passed it a relative URL of /books
.
We set the proxy
property in our package.json
file, so the React application knows that it has to make the HTTP request to http://localhost:5000/books
.
"proxy": "http://localhost:5000",
proxy
property in your package.json
file.If I open my browser console, I can see that the request is successful.
Configuring your Express server correctly
If the error persists, your Express server might be misconfigured.
If you use React Router, you might encounter some issues.
/books/5
, the development server will respond to localhost:3000/books/5
correctly, however, an Express server will not.When there is a fresh page load for /books/5
, the server looks for the file build/books/5
which is not what you want.
Instead, the server needs to be configured to respond to a request to /books/5
with the index.html
file.
Set the homepage
property to a period .
in your React.js package.json
file.
"homepage": "."
In your Express.js index.js
file, make the following changes.
const express = require('express');
const app = express();
const path = require('path');
// serving static files from build directory
app.use(express.static(path.join(__dirname, 'build')));
// catch-all route
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
Make sure the catch-all /*
route is placed after all your other routes (if any have any).
Now requests to /books/5
will get handled correctly both in development and production.
The Express.js server will simply serve the index.html
file from your build
directory.
The npm run build
command creates your build
directory that contains the index.html
file.
npm run build
Using a Static Server instead
As previously noted, the npm run build
command creates your build directory.
The directory contains your index.html
file that should be served to the user and your static assets (JavaScript files, CSS, images, etc).
index.html
file and serve static files when requested.The easiest way to handle this is to use the serve npm package.
You can install the package globally by running the following command.
npm install --global serve
Once you install the package, run the npm run build
command to generate your build
folder.
npm run build
Now issue the serve
command to start your static server.
serve -s build
If you don’t want to install serve
globally, use the npx
prefix instead
npx serve -s build
We pointed the command to the build
directory where it automatically looks for an index.html
file.
If your index.html
file is located in the current (same) directory you would use the following command instead.
npx serve -s .
The -s
(–single) option rewrites all not-found requests to index.html
.
The command will serve your static site on port 3000
(unless the port is already taken).
You can explicitly specify the port by using the -l
or --listen
option.
serve -s build -l 3456
And here is the equivalent command if you prefer to use npx
.
npx serve -s build -l 3456
You can use the npx serve --help
command to view all available options with a short description.
npx serve --help
Make sure JavaScript is enabled in your browser
If the “You need to enable JavaScript to run this app.” error persists, make sure JavaScript is enabled in your browser.
Enabling JavaScript in Chrome
For example, in Google Chrome, you can:
- Click on the three dots icon in the top right corner.
- Click on Privacy and Security and then select Site Settings.
- Scroll down until you see JavaScript and select it.
- Make sure that sites can use JavaScript.
# Enabling JavaScript in Firefox
To enable JavaScript in Firefox:
- Open a new tab, type about:config in the address bar and press
Enter
.
- Click on the Accept the Risk and Continue button.
- In the search field, search for
javascript.enabled
.
- Make sure the setting is set to
true
.
You can double-click on the setting to toggle it.
Enabling JavaScript in Safari
If you use Safari, make sure your JavaScript is enabled by following the instructions in this article.
You can click on the Safari radio button to show the instructions.
Clear your local storage, session storage and cookies
If the error persists, clear your:
- local storage
- session storage
- cookies
For example, in Chrome you can:
- Open your React.js webpage.
- Right-click on the page and select inspect or press
F12
to open your developer tools. - Click on the Application tab.
Expand each submenu, right-click, and select clear.
Try to restart your development server after clearing your local storage, session storage, and cookies.
To solve the React.js error “You need to enable JavaScript to run this app.”, make sure to:
- Configure your proxy on the client side correctly.
- You haven’t disabled JavaScript in your browser.
- You don’t have stale cookies, or local or session storage.
Conclusion for Need to enable JavaScript to run this app error [Fixed]
Hope this code and post will help you implement the need to enable JavaScript to run this app error [Fixed]. if you need any help or any feedback give it in the comment section or if you have a good idea about this post you can give it in the comment section. Your comment will help us to help you more and improve us.