You need to enable JavaScript to run this app error [Fixed]

# Table of Contents

1. Configuring your React.js proxy correctly
2. Configuring your Express server correctly
3. Using a Static Server instead
4. Make sure JavaScript is enabled in your browser
5. Clear your local storage, session storage and cookies

# You need to enable JavaScript to run this app error [Fixed]

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.

Copied!
"proxy": "http://localhost:5000",

Make sure to replace http://localhost:5000 with the fully-qualified URL to your proxy server.

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.

Copied!
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.

Copied!
# 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.

Copied!
import {useEffect} from 'react';

function App() {
  useEffect(() => {
    fetch('/books')
      .then(response => {
        console.log(response);
      })
      .catch(error => {
        console.log(error);
      });
  }, []);

  return (
    <div>
      <h2>bobbyhadz.com</h2>
    </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.

Copied!
"proxy": "http://localhost:5000",

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.

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.

Copied!
"homepage": "."

In your Express.js index.js file, make the following changes.

Copied!
const express = require('express');
const app = express();
const path = require('path');


// 👇️ serving static files from the `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.

Copied!
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).

The easiest way to handle this is to use the serve npm package.

You can install the package globally by running the following command.

Copied!
npm install --global serve

Once you install the package, run the npm run build command to generate your build folder.

Copied!
npm run build

Now issue the serve command to start your static server.

Copied!
serve -s build

If you don't want to install serve globally, use the npx prefix instead.

Copied!
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.

Copied!
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.

Copied!
serve -s build -l 3456

And here is the equivalent command if you prefer to use npx.

Copied!
npx serve -s build -l 3456

You can use the npx serve --help command to view all available options with a short description.

Copied!
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:

1. Click on the three dots icon in the top right corner.

2. Click on Privacy and Security and then select Site Settings.

3. Scroll down until you see JavaScript and select it.

4. Make sure that sites can use JavaScript.

# Enabling JavaScript in Firefox

To enable JavaScript in Firefox:

1. Open a new tab, type about:config in the address bar and press Enter.

2. Click on the Accept the Risk and Continue button.

3. In the search field, search for javascript.enabled.

4. 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:

1. Open your React.js webpage.
2. Right-click on the page and select inspect or press F12 to open your developer tools.
3. 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.

# Conclusion

To solve the React.js error "You need to enable JavaScript to run this app.", make sure to:

1. Configure your proxy on the client side correctly.
2. You haven't disabled JavaScript in your browser.
3. You don't have stale cookies, local or session storage.