rollup-plugin-mjml

1.0.3 verified Mon Apr 27 auth: no javascript maintenance

Rollup plugin to compile MJML templates into HTML during the build process. Current version 1.0.3, released in 2020. The plugin works by importing .mjml files in JavaScript or using @rollup/plugin-multi-entry to bundle templates. It outputs HTML files to a specified directory, with options for validation level and output extension. This plugin bridges the gap between Rollup bundling and MJML email template compilation, allowing integration into modern build pipelines. Longer release cadence; last update over 2 years ago.

Common errors

error Error: Cannot find module 'rollup-plugin-mjml' ↓

cause Package not installed or not in node_modules.

fix

Run npm install rollup-plugin-mjml --save-dev

error TypeError: mjml is not a function ↓

cause Using require() incorrectly in CommonJS; the default export is nested.

fix

Use const mjml = require('rollup-plugin-mjml').default;

error Error: Could not resolve './template.mjml' from 'src/main.js' ↓

cause Rollup cannot resolve .mjml files without a plugin that handles them.

fix

Add mjml() to plugins array in rollup.config.js.

Warnings

gotcha The plugin does not process .mjml files unless they are imported in your bundle or included via multi-entry. ↓

fix Ensure your .mjml files are imported (e.g., import './template.mjml') or use @rollup/plugin-multi-entry to include them as entry points.

gotcha The outputDir is relative to the current working directory (where Rollup is run), not the output.dir configuration. ↓

fix Set outputDir relative to project root, e.g., 'dist/email'.

deprecated The plugin has not been updated in over 2 years. It may have compatibility issues with newer versions of MJML or Rollup. ↓

fix Test with your specific versions of Rollup and MJML. Consider using alternative plugins or manual integration.

gotcha Validation errors in MJML templates may not cause Rollup to fail; they might be silently ignored depending on validationLevel. ↓

fix Set validationLevel: 'strict' to ensure errors are surfaced during build.

Install

npm install rollup-plugin-mjml

yarn add rollup-plugin-mjml

pnpm add rollup-plugin-mjml

Imports

default

wrong

const mjml = require('rollup-plugin-mjml')

correct

import mjml from 'rollup-plugin-mjml'

Rollup plugins are typically imported as default exports in ESM.

default
wrong
```
const mjml = require('rollup-plugin-mjml')
```
correct
```
const mjml = require('rollup-plugin-mjml').default
```
In CommonJS, the plugin is exported as an ESM default, so require returns an object with a default property.
default
wrong
```
export default { plugins: [new mjml()] }
```
correct
```
export default { plugins: [mjml()] }
```
The plugin is a function, not a constructor; call mjml() to instantiate.

Quickstart

Shows basic Rollup configuration with rollup-plugin-mjml, importing an MJML file and outputting HTML to a subdirectory.

// rollup.config.js
import mjml from 'rollup-plugin-mjml';

export default {
  input: 'src/main.js',
  output: { dir: 'dist', format: 'es' },
  plugins: [
    mjml({
      outputDir: 'dist/email',
      validationLevel: 'strict'
    })
  ]
};

// src/main.js
import './template.mjml';

console.log('Template compiled!');