vue-template-compiler-patched

2.7.16-patch.2 verified Fri May 01 auth: no javascript

Security-patched fork of Vue 2's vue-template-compiler (v2.7.16) fixing CVE-2024-6783 (XSS via prototype pollution) and CVE-2024-9506 (ReDoS). Provides the same API as the original package but with sanitized output and regex hardening. Current version: 2.7.16-patch.2. Releases are tied to Vue 2.7.x LTS; no breaking changes vs original. Can be installed as a drop-in alias replacement for vue-template-compiler to automatically satisfy peer dependencies (e.g., @vue/test-utils, vue-loader). Ships TypeScript definitions.

Common errors

error Cannot find module 'vue-template-compiler' ↓

cause You installed vue-template-compiler-patched but the code (e.g., @vue/test-utils) requires 'vue-template-compiler' directly.

fix

Install via the alias method: npm vue-template-compiler@npm:vue-template-compiler-patched@^2.7.16-patch.2 --save-dev

error Failed to compile template: Template syntax error: Unexpected token in attribute expression ↓

cause New stricter parsing due to ReDoS fix; a very long or malformed attribute value now errors instead of hanging.

fix

Shorten or escape problematic template content; avoid deeply nested or unbalanced quotes.

error TypeError: compiler.compile is not a function ↓

cause ESM import incorrectly uses named import: import { compile } from 'vue-template-compiler-patched'.

fix

Use default import: import compiler from 'vue-template-compiler-patched'; then compiler.compile().

error Uncaught ReferenceError: this is not defined (in render function) ↓

cause Compiled render function uses 'with(this)' but strict mode is enabled.

fix

Create context with { Vue: ..., ... } and pass to render.call(context).

error Module not found: Error: Can't resolve 'vue-template-compiler-patched' in '/path' ↓

cause Package is not installed or webpack alias is misconfigured.

fix

Install correctly: npm i vue-template-compiler-patched --save-dev; or configure alias to point to patched version.

Warnings

breaking Output of compile() may differ from original due to XSS sanitization (CVE-2024-6783) - dynamic attributes containing user input are encoded. This may break existing templates relying on raw HTML injection via v-html or mustache without escaping. ↓

fix Use v-html with trusted content only; or manually bypass sanitization with v-pre or skip compilation.

breaking ReDoS fix (CVE-2024-9506) changes regex balancing in tag parsing. Very long or malformed templates may now fail to compile instead of hanging the process. ↓

fix Simplify overly complex templates; validation errors now surface earlier.

deprecated The alias install method (npm:vue-template-compiler-patched) is recommended over direct require of patched name to avoid peer dependency conflicts. ↓

fix Install as vue-template-compiler@npm:vue-template-compiler-patched@^2.7.16-patch.2

gotcha The compile() output still uses 'with' statement, so it cannot be used in strict mode ('use strict') environments without eval-like workarounds. ↓

fix Wrap render functions in a non-strict scope, or use 'new Function(renderCode)' with appropriate context.

gotcha ESM named imports like 'compile' are NOT available; you must use default import or require with destructuring. parseComponent IS a named export. ↓

fix Use: import compiler from 'vue-template-compiler-patched'; then compiler.compile(...).

Install

npm install vue-template-compiler-patched

yarn add vue-template-compiler-patched

pnpm add vue-template-compiler-patched

Imports

compile

wrong

import { compile } from 'vue-template-compiler-patched' (no named export at root)

correct

const compiler = require('vue-template-compiler-patched'); const { render } = compiler.compile(template);

Main export is the compiler object, not named 'compile'. Use default require or default import.

default (compiler object)

wrong

import { compile } from 'vue-template-compiler-patched'

correct

import compiler from 'vue-template-compiler-patched'; compiler.compile(template);

ESM default import works. Named imports like 'compile' are not available at top level.

compile (via destructuring)

wrong

const compile = require('vue-template-compiler-patched').compile (incorrect, no named export)

correct

const { compile } = require('vue-template-compiler-patched');

Destructuring works only in CommonJS require, not ESM named imports.

ssrCompile

wrong

import { ssrCompile } from 'vue-template-compiler-patched'; // errors if module is CJS only

correct

const { ssrCompile } = require('vue-template-compiler-patched');

Same rules as compile; available via destructuring in CJS or as property of default export in ESM.

parseComponent

wrong

const parseComponent = require('vue-template-compiler-patched').parseComponent; // works but ugly

correct

import { parseComponent } from 'vue-template-compiler-patched';

This IS a named export (not on default object). Use named import in ESM.

Quickstart

Shows how to require the patched compiler, compile a template, use SSR compiler, and parse a single-file component.

const compiler = require('vue-template-compiler-patched');
const template = '<div>{{ message }}</div>';
const result = compiler.compile(template, { outputSourceRange: true });
console.log(result.render);
// with: function anonymous() { with(this) { ... } }

// SSR example:
const { ssrCompile } = compiler;
const ssrResult = ssrCompile(template);
console.log(ssrResult.render);

// Parse SFC:
const { parseComponent } = require('vue-template-compiler-patched');
const sfc = `<template><div>Hello</div></template>`;
const parsed = parseComponent(sfc);
console.log(parsed.template.content);