{"id":10927,"library":"gatsby-plugin-no-javascript-utils","title":"Gatsby Plugin for No-JavaScript Static Sites","description":"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.","status":"active","version":"0.13.2","language":"javascript","source_language":"en","source_url":"https://github.com/shoonia/gatsby-plugin-no-javascript-utils","tags":["javascript","gatsby","gatsby-plugin","no-javascript","no-sourcemaps","no-generator","no-inline-styles"],"install":[{"cmd":"npm install gatsby-plugin-no-javascript-utils","lang":"bash","label":"npm"},{"cmd":"yarn add gatsby-plugin-no-javascript-utils","lang":"bash","label":"yarn"},{"cmd":"pnpm add gatsby-plugin-no-javascript-utils","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency as this is a Gatsby plugin.","package":"gatsby","optional":false}],"imports":[{"note":"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.","wrong":"import { GatsbyPluginNoJavascriptUtils } from 'gatsby-plugin-no-javascript-utils';","symbol":"gatsby-plugin-no-javascript-utils","correct":"// In gatsby-config.js\nmodule.exports = {\n  plugins: [\n    // ... other plugins\n    'gatsby-plugin-no-javascript-utils',\n  ],\n};"},{"note":"Plugin options are passed via the standard Gatsby plugin configuration object structure in `gatsby-config.js`. Direct programmatic configuration is not supported.","wrong":"require('gatsby-plugin-no-javascript-utils').configure({ noScript: true });","symbol":"Config with options","correct":"// In gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-plugin-no-javascript-utils',\n      options: {\n        noScript: true,\n        noSourcemaps: false,\n        removeGeneratorTag: true\n      },\n    },\n  ],\n};"}],"quickstart":{"code":"// In your gatsby-config.js\nmodule.exports = {\n  siteMetadata: {\n    title: 'My Static Blog',\n    description: 'A website with no JavaScript.',\n  },\n  polyfill: false, // Often disabled when removing JS\n  plugins: [\n    // Ensure this plugin is placed last to guarantee all scripts are removed\n    // and other modifications are applied after other plugins have run.\n    {\n      resolve: 'gatsby-plugin-no-javascript-utils',\n      options: {\n        noScript: true, // Default: true - Removes all scripts and preload links\n        noSourcemaps: true, // Default: true - Disables JS sourcemap generation\n        removeGeneratorTag: true, // Default: true - Removes Gatsby generator meta tag\n        removeHeadDataAttrs: true, // Default: true - Removes data-react-helmet and data-gatsby-head attrs\n        noInlineStyles: true, // Default: false - Replaces <style data-href> with <link> tags\n        removeGatsbyAnnouncer: true // Default: false - Removes accessibility announcer div\n      }\n    },\n  ],\n};","lang":"javascript","description":"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."},"warnings":[{"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.","message":"Enabling `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.","severity":"breaking","affected_versions":">=0.1.0"},{"fix":"Always place `'gatsby-plugin-no-javascript-utils'` as the final entry in your `plugins` array in `gatsby-config.js`.","message":"This 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.","severity":"gotcha","affected_versions":">=0.1.0"},{"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.","message":"Using `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.","severity":"gotcha","affected_versions":">=0.1.0"},{"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.","message":"Disabling `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.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"The `noScript` option is enabled, which removes all JavaScript from the site.","error":"My Gatsby site isn't interactive; client-side routing and components don't work."},{"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.","cause":"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.","error":"My styles are missing or incorrect after enabling `noInlineStyles: true`."},{"fix":"Move `gatsby-plugin-no-javascript-utils` to the very end of your `plugins` array in `gatsby-config.js`.","cause":"The `gatsby-plugin-no-javascript-utils` plugin is likely not the last plugin in your `gatsby-config.js` plugins array.","error":"I'm seeing a Gatsby generator meta tag even though I tried to remove it."}],"ecosystem":"npm"}