Remove Script Type JavaScript Rehype Plugin

4.0.1 · active · verified Sun Apr 19

This `rehype` plugin, `rehype-remove-script-type-javascript`, is designed to optimize HTML documents by automatically removing redundant `type` and `language` attributes from `<script>` elements that inherently contain JavaScript. It intelligently identifies and targets scripts with types like `text/javascript` or `language` attributes, leaving module scripts (`type="module"`) and other non-JavaScript script types untouched. The package's current stable version is `4.0.1`. It operates within the `unified` ecosystem, processing `hast` syntax trees. While `rehype-remove-script-type-javascript` has its own versioning, it is part of the `rehype-minify` monorepo, which recently underwent a significant `7.0.0` major release, introducing ecosystem-wide changes such as a strict Node.js 16+ requirement and exclusive ESM distribution. This plugin helps improve page load performance by reducing the byte size of HTML, as these attributes are often unnecessary in modern browsers where JavaScript is the default script type. It offers a focused, declarative approach to HTML optimization within a `unified` pipeline.

Common errors

```
Error [ERR_REQUIRE_ESM]: require() of ES Module .../node_modules/rehype-remove-script-type-javascript/index.js from ... not supported.
```
cause Attempting to use CommonJS `require()` to import an ESM-only package.

fix Change `const rehypeRemoveScriptTypeJavaScript = require('rehype-remove-script-type-javascript');` to `import rehypeRemoveScriptTypeJavaScript from 'rehype-remove-script-type-javascript';`. Ensure your Node.js environment supports ESM (e.g., `type: 'module'` in `package.json` or `.mjs` file extension).
```
TypeError: unified(...).use(...).process is not a function
```
cause This usually indicates that the `process` call isn't `await`ed, or the Node.js version is too old for the async API, or `unified` itself is an old version not compatible with the async API.

fix Ensure your code `await`s the `process` call (e.g., `await unified()...process(...)`). Verify Node.js is v16+ and `unified` package is updated to a compatible version (e.g., v11+).
```
SyntaxError: Cannot use import statement outside a module
```
cause Using `import` syntax in a file that Node.js interprets as a CommonJS module (e.g., a `.js` file without `type: "module"` in `package.json` in a directory).

fix Add `"type": "module"` to your project's `package.json` or rename the file to have a `.mjs` extension. Ensure Node.js v16+ is used.

Warnings

breaking The `rehype` ecosystem, including this plugin, transitioned to requiring Node.js 16 or newer with the `rehype-minify` monorepo v7.0.0 release. Older Node.js versions will encounter compatibility issues.
Fix: Upgrade Node.js to version 16 or higher.
breaking This package is now distributed as an ES Module (ESM) only, affecting how it's imported in Node.js applications. CommonJS `require()` statements will fail.
Fix: Use ES module syntax (e.g., `import rehypeRemoveScriptTypeJavaScript from 'rehype-remove-script-type-javascript';`) and ensure your project is configured for ESM (e.g., `'type': 'module'` in `package.json` or `.mjs` file extension).
gotcha Improper handling of HTML with `rehype` can lead to Cross-Site Scripting (XSS) vulnerabilities. While this specific plugin removes attributes, the broader `rehype` processing can be unsafe if untrusted HTML is processed without sanitization.
Fix: Always use `rehype-sanitize` as part of your unified pipeline when processing untrusted or user-generated HTML content.
breaking The `rehype-minify` monorepo v7.0.0 release involved significant updates to underlying `unified` and `@types/hast` dependencies, requiring users to also update their `unified` core and related utilities to maintain compatibility.
Fix: Update all related `unified` ecosystem packages (e.g., `unified`, `rehype-parse`, `rehype-stringify`) to their latest compatible major versions.

Install

npm install rehype-remove-script-type-javascript npm
yarn add rehype-remove-script-type-javascript yarn
pnpm add rehype-remove-script-type-javascript pnpm

Imports

rehypeRemoveScriptTypeJavaScript

wrong:

const rehypeRemoveScriptTypeJavaScript = require('rehype-remove-script-type-javascript');

correct:

import rehypeRemoveScriptTypeJavaScript from 'rehype-remove-script-type-javascript';

This package is ESM-only since v4.0.0, aligning with the unified ecosystem's transition to ESM and Node.js 16+ requirement.

Quickstart

Demonstrates how to integrate `rehype-remove-script-type-javascript` into a `unified` processing pipeline to remove redundant script type attributes from an HTML file.

import rehypeParse from 'rehype-parse';
import rehypeRemoveScriptTypeJavaScript from 'rehype-remove-script-type-javascript';
import rehypeStringify from 'rehype-stringify';
import {unified} from 'unified';
import {VFile} from 'vfile';

async function processExampleHtml() {
  const htmlInput = `<!doctype html><html><head></head><body>
    <script type="text/javascript">console.log('Legacy JS');</script>
    <script language="javascript">alert('Another legacy JS');</script>
    <script type="module">import './modern.js';</script>
    <script type="application/json">{"data": "json-script"}</script>
    <script src="external.js" type="text/javascript"></script>
  </body></html>`;

  const inputVFile = new VFile({ path: 'input.html', value: htmlInput });

  const outputVFile = await unified()
    .use(rehypeParse, { fragment: false }) // Process as a full document
    .use(rehypeRemoveScriptTypeJavaScript)
    .use(rehypeStringify)
    .process(inputVFile);

  console.log('Original HTML:\n', htmlInput);
  console.log('\nProcessed HTML:\n', String(outputVFile));
}

processExampleHtml();

view raw JSON →