{"id":20796,"library":"webpack-mjml-loader","title":"webpack-mjml-loader","description":"A webpack loader that compiles MJML email templates into HTML strings at build time. Current stable version is 2.0.1 (released March 2025), targeting webpack 5 exclusively. For webpack 4, use v1.1.0. MJML is a peer dependency, allowing you to choose any MJML v4+ version. Key differentiators: forwards all MJML options (like minification) via loader options, outputs HTML as a default export string, and ships TypeScript definitions. Compared to other MJML loaders, this one is simple, well-maintained, and explicitly designed for webpack 5.","status":"active","version":"2.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/BlitzBanana/webpack-mjml-loader","tags":["javascript","webpack","webpack-loader","mjml","mjml4","typescript"],"install":[{"cmd":"npm install webpack-mjml-loader","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-mjml-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-mjml-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency – transforms MJML syntax to HTML","package":"mjml","optional":false}],"imports":[{"note":"The loader converts MJML to an HTML string as the default export. Named import will fail.","wrong":"import { template } from './email.mjml'","symbol":"default import from .mjml file","correct":"import template from './email.mjml'"},{"note":"Use the `use` property for loaders in webpack 5. The `loader` shorthand is deprecated.","wrong":"module.exports = { module: { rules: [ { test: /\\.mjml$/, loader: 'webpack-mjml-loader' } ] } }","symbol":"webpack rule for .mjml files","correct":"module.exports = { module: { rules: [ { test: /\\.mjml$/, use: 'webpack-mjml-loader' } ] } }"},{"note":"TypeScript users may need to add a module declaration for .mjml files: declare module '*.mjml' { const content: string; export default content; }","wrong":"import * as template from './email.mjml'","symbol":"TypeScript import","correct":"import template from './email.mjml'"}],"quickstart":{"code":"// Install:\n// npm install -D webpack-mjml-loader mjml\n// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.mjml$/,\n        use: [\n          {\n            loader: 'webpack-mjml-loader',\n            options: { minify: true }\n          }\n        ]\n      }\n    ]\n  }\n};\n// email.mjml\n<mjml>\n  <mj-body>\n    <mj-section>\n      <mj-column>\n        <mj-text>Hello World!</mj-text>\n      </mj-column>\n    </mj-section>\n  </mj-body>\n</mjml>\n// app.js\nimport template from './email.mjml';\nconsole.log(template); // HTML string output","lang":"javascript","description":"Shows how to install, configure webpack rule for .mjml files, and import compiled HTML string."},"warnings":[{"fix":"Use webpack 5. If you must use webpack 4, pin to webpack-mjml-loader@1.1.0.","message":"v2.0.0 drops webpack 4 support – upgrade to webpack 5 or stay on v1.1.0.","severity":"breaking","affected_versions":">=2.0.0 <3.0.0"},{"fix":"Migrate to v2 and webpack 5.","message":"v1.x will not receive updates – new features only for v2.","severity":"deprecated","affected_versions":">=1.0.0 <2.0.0"},{"fix":"Run: npm install -D mjml","message":"MJML must be installed as a peer dependency – missing it causes an error at build time.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Refer to MJML documentation for valid options. Start without options and add gradually.","message":"Options are forwarded to MJML's mjml2html – misconfigured options (e.g., invalid validationLevel) can silently produce broken HTML.","severity":"gotcha","affected_versions":">=1.1.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add a module rule in webpack.config.js: { test: /\\.mjml$/, use: 'webpack-mjml-loader' }","cause":"Webpack config does not have a rule for .mjml files or the loader is not applied.","error":"Module parse failed: Unexpected token (1:0)\nYou may need an appropriate loader to handle this file type."},{"fix":"Run: npm install -D mjml","cause":"MJML peer dependency is not installed.","error":"Cannot find module 'mjml'"},{"fix":"Create a declaration file (e.g., global.d.ts) with: declare module '*.mjml' { const content: string; export default content; }","cause":"TypeScript does not recognize .mjml files without a module declaration.","error":"TypeScript: Cannot find module './email.mjml' or its corresponding type declarations."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}