{"id":25961,"library":"mpvue-template-compiler","title":"mpvue Template Compiler","description":"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.","status":"maintenance","version":"1.4.6","language":"javascript","source_language":"en","source_url":"https://github.com/Meituan-Dianping/mpvue","tags":["javascript","vue","compiler","mp","antmp"],"install":[{"cmd":"npm install mpvue-template-compiler","lang":"bash","label":"npm"},{"cmd":"yarn add mpvue-template-compiler","lang":"bash","label":"yarn"},{"cmd":"pnpm add mpvue-template-compiler","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime peer dependency, version must match template-compiler.","package":"mpvue","optional":false},{"reason":"Required for bundling; mismatched versions cause compilation errors.","package":"mpvue-loader","optional":true}],"imports":[{"note":"Package does not provide ESM exports; use require for Node.js usage.","wrong":"import compiler from 'mpvue-template-compiler'","symbol":"mpvueTemplateCompiler","correct":"const compiler = require('mpvue-template-compiler')"},{"note":"Named export compile is available but only via require; ESM import may fail.","wrong":"import { compile } from 'mpvue-template-compiler'","symbol":"compile","correct":"const { compile } = require('mpvue-template-compiler')"},{"note":"parseComponent is a named export, not default.","wrong":"import parseComponent from 'mpvue-template-compiler'","symbol":"parseComponent","correct":"const { parseComponent } = require('mpvue-template-compiler')"}],"quickstart":{"code":"const compiler = require('mpvue-template-compiler');\n\nconst template = '<view>{{ msg }}</view>';\nconst result = compiler.compile(template, {\n  mpvue: true,\n  platform: 'wx', // WeChat\n  warn: false\n});\nconsole.log(result.render);\n\n// Expected output: an object with render, staticRenderFns, errors, tips","lang":"javascript","description":"Demonstrates basic compilation of a mpvue template using require() and compile() with platform option."},"warnings":[{"fix":"Ensure mpvue-template-compiler version equals mpvue version in package.json.","message":"Version mismatch: mpvue-template-compiler must match mpvue version exactly; otherwise template compilation produces invalid code.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Add fileExt: { mp: '.wxml', wx: '.wxml' } (or appropriate platform extensions) in build config.","message":"FileExt configuration: In mpvue 2.x and 1.x builds, the fileExt option must be set in config for correct output.","severity":"breaking","affected_versions":">=1.4.0"},{"fix":"Upgrade to mpvue 2.x only if multi-platform support is needed; otherwise stick with 1.x.","message":"2.x branch: mpvue 2.0 introduced multi-platform support; 1.x is still maintained but no new features.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Use require() or configure bundler to handle CJS interop.","message":"ESM import not supported: This package uses CommonJS; using import may fail in some bundlers.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always check result.errors after compile() and log or throw on any errors.","message":"Compilation result includes errors and tips: Ignoring errors array leads to silent failures in production.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always specify platform: 'wx' | 'alipay' | 'baidu' | 'toutiao'.","message":"Platform option required in compile(): Omitting platform may generate wrong template for target mini program.","severity":"breaking","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Change to const compiler = require('mpvue-template-compiler'); or use dynamic import with default export.","cause":"Importing as ES module (import) but package only supports CommonJS.","error":"TypeError: compiler.compile is not a function"},{"fix":"Run npm install mpvue-template-compiler --save-dev (or --save) to add it explicitly.","cause":"Package not installed because it's a dependency of mpvue-loader and may not be in package.json.","error":"Module not found: Error: Can't resolve 'mpvue-template-compiler' in ..."},{"fix":"Set type: 'module' in package.json and use import syntax, or use require() with CommonJS.","cause":"Using ES module syntax in a Node script without proper module setup.","error":"SyntaxError: Unexpected token 'import'"},{"fix":"Use platform: 'wx' for WeChat, 'alipay' for Alipay, 'baidu' for Baidu, 'toutiao' for Toutiao.","cause":"Platform name mismatch: common mistake where platform value is incorrect (e.g., 'wechat' instead of 'wx').","error":"Compilation error: Unknown platform 'wx'"},{"fix":"Ensure you have mpvue-loader installed and properly configured in webpack.","cause":"Attempting to use compiled output directly without the loader or proper bundler setup.","error":"ERROR: Must be used with mpvue-loader"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}