Fix "You need to enable JavaScript to run this app" with a noscript HTML snippet

Maintained by enablejavascript.io · Updated June 1, 2026

The drop-in noscript HTML snippet

Drop this into your <body>. Visitors with JavaScript enabled never see it; everyone else gets a clear message and a link to step-by-step instructions for their exact browser, in 38 languages.

<noscript>
For full functionality of this site it is necessary to enable JavaScript.
Here are the <a href="https://www.enablejavascript.io/">
instructions how to enable JavaScript in your web browser</a>.
</noscript>

Already used by developers on millions of pages.

The link points to enablejavascript.io, where visitors choose their browser and get instructions in 38 languages, so you don't write or maintain them yourself.

That message (and a blank page for anyone with JavaScript off) is something you fix with a <noscript> JavaScript fallback. Some visitors browse with JavaScript disabled, by privacy extensions like NoScript, by corporate or school policy, on locked-down or older devices. This is the developer's guide to handling them: the drop-in noscript HTML snippet, the "you need to enable JavaScript to run this app" message, detection patterns, and React, Next.js, Vue, and Angular examples.

"You need to enable JavaScript to run this app"

If you've built with Create React App or a similar tool, you've seen this line. It is not a bug. It is the default content of the <noscript> block in your public/index.html, and it renders only for visitors whose browser has JavaScript disabled, the single-page app can't boot without it. (Create React App itself is now legacy, but this message is still everywhere in existing React apps.)

You have two good options: leave it (it is correct, honest behaviour), or replace it with something friendlier that actually helps the visitor fix it: 

<!-- Create React App: public/index.html  (Vite: index.html in the project root) -->
<noscript>
You need to enable JavaScript to run this app. Here are the
<a href="https://www.enablejavascript.io/">
instructions to enable JavaScript in your browser</a>.
</noscript>
<div id="root"></div>

Either way, never ship a blank screen. A visitor who sees nothing assumes your site is broken; a visitor who sees a one-line explanation plus a link fixes it in seconds and stays.

What the noscript tag is in HTML

Written as the noscript tag, noscript HTML, or html noscript, it's all the same standard element: <noscript> renders its contents only when scripting is disabled or unsupported. It works in every major browser and needs no library.

  • In the <body> it can contain normal flow content, a paragraph, a message, a styled banner, which is what you want for an "enable JavaScript" notice.
  • In the <head> it may only contain <link>, <style>, and <meta> elements, useful for shipping a no-JS stylesheet.
  • It cannot be nested inside another <noscript>.

It only covers the "scripting is off" case. To react when JavaScript is on, use the detection pattern below.

How to check if JavaScript is enabled (and detect when it's disabled)

To check if JavaScript is enabled (and detect when it is disabled), use the no-js / js class flip: mark the document as no-JS by default, then immediately rewrite it from an inline script. CSS does the rest. 

<!-- Default to "no JS"; flip it the instant a script runs -->
<html class="no-js">
  <head>
    <script>var d=document.documentElement;d.classList.remove('no-js');d.classList.add('js')</script>
    <style>
      .js   .requires-js-off { display: none; } /* hide once JS is on  */
      .no-js .requires-js-on  { display: none; } /* hide while JS is off */
    </style>
  </head>
</html>

Now anything in .requires-js-on shows only with JavaScript, and anything in .requires-js-off shows only without it. Pair the no-JS branch with the <noscript> snippet above. Put the class-flip script as early as possible in <head> to minimise any flash of the wrong state, and if you run a strict Content Security Policy, give the inline script a nonce or hash. You can't reliably detect disabled JavaScript on the first server request, so handle it on the client.

React, Next.js, Vue & Angular

Client-rendered apps depend on JavaScript to render or hydrate. If a route is blank or unusable without JavaScript, add a visible JavaScript fallback near the app root. Where it goes:

Each tool ships (or doesn't) its own default <noscript> message — here's what you're replacing:

  • Create React App / React — "You need to enable JavaScript to run this app."
  • Angular — "Please enable JavaScript to continue using this application."
  • Vue CLI — "We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue."
  • Vite, Next.js, Nuxt & SvelteKit — no default message; you add your own.
  • WebAssembly stacks (Blazor / C#, Flutter Web / Dart, Rust / Yew) — also blank without JavaScript; the same <noscript> fallback applies.

React noscript: the enable-JavaScript fallback

Create React App ships a React enable-JavaScript message in its default <noscript>. Edit it in public/index.html (Vite: index.html in the project root):

<!-- Create React App: public/index.html  (Vite: index.html in the project root) -->
<noscript>
You need to enable JavaScript to run this app. Here are the
<a href="https://www.enablejavascript.io/">
instructions to enable JavaScript in your browser</a>.
</noscript>
<div id="root"></div>

Next.js noscript (App Router and Pages Router)

Put the <noscript> in your root layout so it ships on every route:

// Next.js (App Router): app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <noscript>
          This site requires JavaScript. Here are the
          <a href="https://www.enablejavascript.io/">
          instructions to enable it</a>.
        </noscript>
        {children}
      </body>
    </html>
  )
}
// Pages Router: put the same <noscript> in pages/_document.tsx inside <body>.

Vue & Angular noscript

<!-- Vue (index.html) and Angular (src/index.html) are the same idea: -->
<noscript>
<strong>This site requires JavaScript.</strong>
See <a href="https://www.enablejavascript.io/">
how to enable JavaScript</a>.
</noscript>
<div id="app"></div>      <!-- Vue mount point -->
<app-root></app-root>     <!-- Angular mount point -->

Writing a good "JavaScript required" message

A good JavaScript disabled message (the text inside your <noscript>) does three things:

  • Says what's wrong, plainly: "This site requires JavaScript."
  • Says how to fix it, with a link to real, browser-specific steps rather than "turn on JavaScript" with no guidance.
  • Avoids the dead end: no blank page, no infinite spinner, no generic "something went wrong".

Examples of a JavaScript disabled message that works: "This site requires JavaScript. Here are the instructions to enable it." The snippet at the top of this page does all three — keep it as-is, and above all keep the https://www.enablejavascript.io/ link, so visitors land on maintained, browser-specific instructions instead of a dead end.

Progressive enhancement vs. graceful degradation

A <noscript> fallback is the simplest form of progressive enhancement: ship a baseline that works without JavaScript, then layer the interactive app on top. The mirror image, graceful degradation, starts from the full JavaScript app and makes sure it fails politely when scripting is off instead of rendering a blank page.

For a single-page app you usually can't deliver the whole experience without JavaScript, and that's fine. The realistic goal is the middle ground: when JavaScript is disabled, show a clear message that explains what's needed and links to the fix, never an empty screen or an endless spinner. That one <noscript> block is the smallest, highest-leverage step you can take.

References

FAQ

How do I fix "You need to enable JavaScript to run this app"?

It's not an error in your code, it's the contents of your app's <noscript> fallback (for example Create React App's public/index.html), shown only to visitors with JavaScript disabled. Replace it with a friendly message that links to enable-JavaScript instructions, or leave it, it's correct behaviour.

What is the noscript tag in HTML?

An HTML element (the noscript tag, noscript HTML, or html noscript) whose content renders only when JavaScript is disabled or unsupported. Put it in the <body> for a visible fallback message, or in the <head> for fallback <link>, <style>, or <meta> tags.

How do I check if JavaScript is enabled?

Use <noscript> for the no-JavaScript case, and for the JavaScript-on case flip a class on <html> with a tiny inline script, then show or hide with CSS. Server-side detection of disabled JavaScript isn't reliable on the first request.