Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
default import from .mjml file
✓ import template from './email.mjml'
✗ import { template } from './email.mjml'
The loader converts MJML to an HTML string as the default export. Named import will fail.
webpack rule for .mjml files
✓ module.exports = { module: { rules: [ { test: /\.mjml$/, use: 'webpack-mjml-loader' } ] } }
✗ module.exports = { module: { rules: [ { test: /\.mjml$/, loader: 'webpack-mjml-loader' } ] } }
Use the `use` property for loaders in webpack 5. The `loader` shorthand is deprecated.
TypeScript import
✓ import template from './email.mjml'
✗ import * as template from './email.mjml'
TypeScript users may need to add a module declaration for .mjml files: declare module '*.mjml' { const content: string; export default content; }
Shows how to install, configure webpack rule for .mjml files, and import compiled HTML string.
// Install:
// npm install -D webpack-mjml-loader mjml
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.mjml$/,
use: [
{
loader: 'webpack-mjml-loader',
options: { minify: true }
}
]
}
]
}
};
// email.mjml
<mjml>
<mj-body>
<mj-section>
<mj-column>
<mj-text>Hello World!</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
// app.js
import template from './email.mjml';
console.log(template); // HTML string output
Errors
Common errors & fixes
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
Webpack config does not have a rule for .mjml files or the loader is not applied.
fixAdd a module rule in webpack.config.js: { test: /\.mjml$/, use: 'webpack-mjml-loader' } Cannot find module 'mjml'
MJML peer dependency is not installed.
fixRun: npm install -D mjml
TypeScript: Cannot find module './email.mjml' or its corresponding type declarations.
TypeScript does not recognize .mjml files without a module declaration.
fixCreate a declaration file (e.g., global.d.ts) with: declare module '*.mjml' { const content: string; export default content; } Audit
Dependencies
mjmlrequiredPeer dependency – transforms MJML syntax to HTML