11ty ECMAScript Modules Support

Eleventy v3.0 has a lot of changes including ESM support.
This is a feature many have been looking forward to.

Calling all courageous canary testers for Eleventy v3.0

They already converted the main 11ty site to v3.0 & report there were no problems.

Conversion #

The main changes required:

• change require to import in javascript files
• change module.exports to export

There are a few other changes required but that's the two main changes.

Main Changes #

• update eleventy to 3.0.0
• set type module in package.json
• update all JS to ESM format
• set eslint to use CJS
• set prettier to use CJS
• update tailwind config to ESM
• update postcss config to ESM
• update dependencies which were on hold due to ESM requirement
• set netlify to build using latest Node LTS
• add redirect for mastodon account

More information on the changes made to the site can be found on Github.

Eleventy v3 with ECMAScript Modules pull request on github

Using Commonjs #

It's possible to still use commonjs with the cjs file extension.

Configuration Files - ESLint

Example Diff #

commit 30784c1 - eleventy.config.js

-const esbuild = require('esbuild')
-const fs = require('fs')
-
-const markdownItAnchor = require('markdown-it-anchor')
-const markdownItTaskLists = require('markdown-it-task-lists')
-
-const pluginRss = require('@11ty/eleventy-plugin-rss')
-const pluginSyntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight')
-const pluginBundle = require('@11ty/eleventy-plugin-bundle')
-const pluginNavigation = require('@11ty/eleventy-navigation')
-const { EleventyHtmlBasePlugin } = require('@11ty/eleventy')
-const pluginSEO = require('eleventy-plugin-seo')
-
-const postcss = require('postcss')
-const tailwindcss = require('tailwindcss')
-const autoprefixer = require('autoprefixer')
-const postcssimport = require('postcss-import')
-const cssnano = require('cssnano')
-
-const sharp = require('sharp')
-
-const sanitizeHTML = require('sanitize-html')
-
-const pluginDrafts = require('./eleventy.config.drafts.js')
-const pluginImages = require('./eleventy.config.images.js')
-const containerPlugin = require('./eleventy.config.markdown.js')
-
-const metadata = require('./src/_data/metadata.js')
-
-module.exports = function (eleventyConfig) {
+import esbuild from 'esbuild'
+import fs from 'fs'
+import markdownItAnchor from 'markdown-it-anchor'
+import markdownItTaskLists from 'markdown-it-task-lists'
+import pluginRss from '@11ty/eleventy-plugin-rss'
+import pluginSyntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight'
+import pluginBundle from '@11ty/eleventy-plugin-bundle'
+import pluginNavigation from '@11ty/eleventy-navigation'
+import { EleventyHtmlBasePlugin } from '@11ty/eleventy'
+import pluginSEO from 'eleventy-plugin-seo'
+import postcss from 'postcss'
+import tailwindcss from 'tailwindcss'
+import autoprefixer from 'autoprefixer'
+import postcssimport from 'postcss-import'
+import cssnano from 'cssnano'
+import sharp from 'sharp'
+import sanitizeHTML from 'sanitize-html'
+import pluginDrafts from './eleventy.config.drafts.js'
+import pluginImages from './eleventy.config.images.js'
+import containerPlugin from './eleventy.config.markdown.js'
+import metadata from './src/_data/metadata.js'
+
+export default function (eleventyConfig) {

References #

Eleventy v3 with ESM support now on the canary channel
Big v3.0.0 Project Slipstream Changes