{"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,"search_vec":"'2.0.1':23 '2025':26 '4':33 '5':29,88 'allow':41 'build':17 'choos':44 'compar':71 'compil':9 'current':19 'default':64 'definit':70 'depend':40 'design':85 'differenti':50 'email':11 'exclus':30 'explicit':84 'export':65 'forward':51 'html':14,61 'javascript':89 'key':49 'like':55 'loader':4,7,58,75,93 'maintain':82 'march':25 'minif':56 'mjml':3,10,36,46,53,74,94 'mjml4':95 'one':77 'option':54,59 'output':60 'peer':39 'releas':24 'ship':68 'simpl':79 'stabl':20 'string':15,66 'target':27 'templat':12 'time':18 'typescript':69,96 'use':34 'v1.1.0':35 'v4':47 'version':21,48 'via':57 'webpack':2,6,28,32,87,90,92 'webpack-load':91 'webpack-mjml-load':1 'well':81 'well-maintain':80","created_at":"2026-04-25T11:25:01.435637+00:00","updated_at":"2026-04-25T11:25:01.435637+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/BlitzBanana/webpack-mjml-loader","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/webpack-mjml-loader","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops","serialization","web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-24","install_tag":null}}