Registry / web-framework / gatsby-plugin-no-javascript-utils

gatsby-plugin-no-javascript-utils

library0.13.2jsnpmunverified

gatsby-plugin-no-javascript-utils is a Gatsby plugin designed to assist in generating purely static sites with minimal to no client-side JavaScript. It currently ships as version 0.13.2, which supports Gatsby versions 2 through 5, indicating a stable but relatively slow release cadence, typical for plugins that modify core build outputs rather than introduce new features. Its primary differentiator is its focus on stripping out various JavaScript-related artifacts that Gatsby typically includes by default, such as script tags, preload links for scripts and page data, JavaScript sourcemaps, and client-side routing announcers. Additionally, it offers options to remove generator meta tags, data attributes from head elements (like `data-react-helmet`), and convert inline `<style data-href>` tags to external `<link>` tags for improved caching and smaller HTML files. This makes it ideal for highly SEO-sensitive sites or those targeting extremely lightweight builds where JavaScript is entirely optional or handled externally.

web-framework

npm install gatsby-plugin-no-javascript-utils

github ↗package ↗

INSTALL

IMPORT

SIG · GATSBY-PLUGIN-NO-J

gatsby-plugin-no-javascript-utils

web-frameworkjavascriptv0.13.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

gatsby-plugin-no-javascript-utils

✓ // In gatsby-config.js module.exports = { plugins: [ // ... other plugins 'gatsby-plugin-no-javascript-utils', ], };

✗ import { GatsbyPluginNoJavascriptUtils } from 'gatsby-plugin-no-javascript-utils';

This package is a Gatsby plugin and is configured via `gatsby-config.js`. It does not export symbols for direct import into component or utility files. Its inclusion is typically last in the plugin array.

Config with options

✓ // In gatsby-config.js module.exports = { plugins: [ { resolve: 'gatsby-plugin-no-javascript-utils', options: { noScript: true, noSourcemaps: false, removeGeneratorTag: true }, }, ], };

✗ require('gatsby-plugin-no-javascript-utils').configure({ noScript: true });

Plugin options are passed via the standard Gatsby plugin configuration object structure in `gatsby-config.js`. Direct programmatic configuration is not supported.

This quickstart demonstrates how to add the plugin to `gatsby-config.js` and configure its main options to achieve a truly JavaScript-free Gatsby build, optimizing for minimal HTML output and enhanced caching.

// In your gatsby-config.js module.exports = { siteMetadata: { title: 'My Static Blog', description: 'A website with no JavaScript.', }, polyfill: false, // Often disabled when removing JS plugins: [ // Ensure this plugin is placed last to guarantee all scripts are removed // and other modifications are applied after other plugins have run. { resolve: 'gatsby-plugin-no-javascript-utils', options: { noScript: true, // Default: true - Removes all scripts and preload links noSourcemaps: true, // Default: true - Disables JS sourcemap generation removeGeneratorTag: true, // Default: true - Removes Gatsby generator meta tag removeHeadDataAttrs: true, // Default: true - Removes data-react-helmet and data-gatsby-head attrs noInlineStyles: true, // Default: false - Replaces <style data-href> with <link> tags removeGatsbyAnnouncer: true // Default: false - Removes accessibility announcer div } }, ], };

Debug

Known issues

breakingEnabling `noScript: true` (which is the default) will remove all client-side JavaScript, including Gatsby's hydration, routing, and any interactive components. This will effectively render your Gatsby site as a purely static HTML site.

fix

Ensure your site is intended to be purely static with no client-side interactions if `noScript` is enabled. Test thoroughly to confirm no essential functionality relies on JavaScript.

affects: >=0.1.0

gotchaThis plugin must be included last in your `gatsby-config.js` plugins array. If placed earlier, other plugins might re-introduce scripts or modify output in ways that conflict with this plugin's clean-up process.

fix

Always place `'gatsby-plugin-no-javascript-utils'` as the final entry in your `plugins` array in `gatsby-config.js`.

affects: >=0.1.0

gotchaUsing `noInlineStyles: true` converts `<style data-href>` tags to `<link>` tags. While beneficial for caching, it requires the corresponding CSS files to be served correctly by your build/deployment process. This might conflict with certain CSS-in-JS solutions or build setups that expect styles to be inlined.

fix

Verify that your build pipeline correctly generates and serves external CSS files when `noInlineStyles` is active. Test your site's styling thoroughly across browsers.

affects: >=0.1.0

gotchaDisabling `removeGatsbyAnnouncer` (default: false) might leave the accessibility announcer div in your HTML, which is primarily useful for client-side route changes. If `noScript` is enabled, this element becomes largely redundant and adds unnecessary markup.

fix

If `noScript` is enabled, it's recommended to set `removeGatsbyAnnouncer: true` to further reduce HTML bloat and ensure consistency with a pure static site approach.

affects: >=0.1.0

Errors

Common errors & fixes

My Gatsby site isn't interactive; client-side routing and components don't work.

The `noScript` option is enabled, which removes all JavaScript from the site.

fix

If you need client-side interactivity, set `noScript: false` in the plugin options, or remove `gatsby-plugin-no-javascript-utils` entirely if JavaScript is fundamental to your site's functionality.

My styles are missing or incorrect after enabling `noInlineStyles: true`.

The build process might not be correctly generating or linking external CSS files, or some styles were expected to be inlined and are now missing.

fix

Inspect your `public` directory to ensure CSS files are being generated. Check the browser's network tab to see if CSS `<link>` tags are loading the correct files. Adjust your Gatsby styling setup if necessary to ensure compatibility with external CSS linking.

I'm seeing a Gatsby generator meta tag even though I tried to remove it.

The `gatsby-plugin-no-javascript-utils` plugin is likely not the last plugin in your `gatsby-config.js` plugins array.

fix

Move `gatsby-plugin-no-javascript-utils` to the very end of your `plugins` array in `gatsby-config.js`.

Upgrade

Version history

0.13.2latest on npm

Audit

Dependencies

gatsbyrequiredPeer dependency as this is a Gatsby plugin.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/shoonia/gatsby-plugin-no-javascript-utils ↗

packagehttps://www.npmjs.com/package/gatsby-plugin-no-javascript-utils ↗