mpvue Template Compiler

1.4.6 verified Fri May 01 auth: no javascript maintenance

Template compiler for mpvue, a framework for building Mini Programs using Vue.js. Current stable version is 1.4.6. The compiler transforms Vue template syntax into target-specific code for WeChat, Alipay, Baidu, and Toutiao Mini Programs. Release cadence is irregular; ongoing maintenance on 1.x branch. Key differentiators: extends Vue syntax to Mini Programs, supports multiple platforms in 2.x. Requires mpvue-loader and mpvue core. Common issues arise from mismatched versioning between compiler and framework, and incorrect fileExt configuration.

Common errors

error TypeError: compiler.compile is not a function ↓

cause Importing as ES module (import) but package only supports CommonJS.

fix

Change to const compiler = require('mpvue-template-compiler'); or use dynamic import with default export.

error Module not found: Error: Can't resolve 'mpvue-template-compiler' in ... ↓

cause Package not installed because it's a dependency of mpvue-loader and may not be in package.json.

fix

Run npm install mpvue-template-compiler --save-dev (or --save) to add it explicitly.

error SyntaxError: Unexpected token 'import' ↓

cause Using ES module syntax in a Node script without proper module setup.

fix

Set type: 'module' in package.json and use import syntax, or use require() with CommonJS.

error Compilation error: Unknown platform 'wx' ↓

cause Platform name mismatch: common mistake where platform value is incorrect (e.g., 'wechat' instead of 'wx').

fix

Use platform: 'wx' for WeChat, 'alipay' for Alipay, 'baidu' for Baidu, 'toutiao' for Toutiao.

error ERROR: Must be used with mpvue-loader ↓

cause Attempting to use compiled output directly without the loader or proper bundler setup.

fix

Ensure you have mpvue-loader installed and properly configured in webpack.

Warnings

breaking Version mismatch: mpvue-template-compiler must match mpvue version exactly; otherwise template compilation produces invalid code. ↓

fix Ensure mpvue-template-compiler version equals mpvue version in package.json.

breaking FileExt configuration: In mpvue 2.x and 1.x builds, the fileExt option must be set in config for correct output. ↓

fix Add fileExt: { mp: '.wxml', wx: '.wxml' } (or appropriate platform extensions) in build config.

deprecated 2.x branch: mpvue 2.0 introduced multi-platform support; 1.x is still maintained but no new features. ↓

fix Upgrade to mpvue 2.x only if multi-platform support is needed; otherwise stick with 1.x.

gotcha ESM import not supported: This package uses CommonJS; using import may fail in some bundlers. ↓

fix Use require() or configure bundler to handle CJS interop.

gotcha Compilation result includes errors and tips: Ignoring errors array leads to silent failures in production. ↓

fix Always check result.errors after compile() and log or throw on any errors.

breaking Platform option required in compile(): Omitting platform may generate wrong template for target mini program. ↓

fix Always specify platform: 'wx' | 'alipay' | 'baidu' | 'toutiao'.

Install

npm install mpvue-template-compiler

yarn add mpvue-template-compiler

pnpm add mpvue-template-compiler

Imports

mpvueTemplateCompiler

wrong

import compiler from 'mpvue-template-compiler'

correct

const compiler = require('mpvue-template-compiler')

Package does not provide ESM exports; use require for Node.js usage.

compile

wrong

import { compile } from 'mpvue-template-compiler'

correct

const { compile } = require('mpvue-template-compiler')

Named export compile is available but only via require; ESM import may fail.

parseComponent

wrong

import parseComponent from 'mpvue-template-compiler'

correct

const { parseComponent } = require('mpvue-template-compiler')

parseComponent is a named export, not default.

Quickstart

Demonstrates basic compilation of a mpvue template using require() and compile() with platform option.

const compiler = require('mpvue-template-compiler');

const template = '<view>{{ msg }}</view>';
const result = compiler.compile(template, {
  mpvue: true,
  platform: 'wx', // WeChat
  warn: false
});
console.log(result.render);

// Expected output: an object with render, staticRenderFns, errors, tips