Unable to use an async ESM plugin with a CommonJS eleventy config file

[purrloftruth]

Operating system

macOS Sequoia 15.3

Eleventy

3.0.0

Describe the bug

Today I attempted to download and use the plugin eleventy-plugin-postcss, which was updated just about 2 weeks ago for the latest version of eleventy. It's written in ESM, and is async.

My eleventy config file, up until tonight, was still CommonJS. Even after trying to deal with switching the require() to an import() and fiddling constantly with async and await, spending hours fiddling with things like node and npm versions out of sheer frustration, I was unable to get the plugin to work, seeing the error "Invalid EleventyConfig.addPlugin signature. Should be a function or a valid Eleventy plugin object. (via UserConfigError)" constantly.

I even tried forking and downloading the source of the plugin itself to see if I could debug it, to no avail.

I think this is probably just a bug in eleventy. I was able to determine while debugging that simply using an ESM-formatted config file works fine to get the plugin to run, so I've done that instead. (I still haven't managed to actually determine whether the plugin is fit for my use, mind you! This is all just to get things to run in the first place.)

I'm sorry that this isn't a properly formatted bug report, but I'm really tired and have spent all day futzing with this and kind of just want to log off and eat something... hope that's understandable 🙏🏻😅💖

Reproduction steps

1. Start a new eleventy project with a CommonJS config file.
2. Add the plugin "eleventy-plugin-postcss" to your npm package, along with the prerequisite dependencies, and add it to your eleventy config.
3. Attempt to run eleventy.

Expected behavior

It runs just fine.

Reproduction URL

No response

Screenshots

No response

[Ryuno-Ki]

Confirmed.

It's a little bit trickier. I reported it as whoisvadym/eleventy-plugin-postcss#15 with the plugin.

The gist:

module.exports = async (eleventyConfig) => {
    const PostCSSPlugin = await import("eleventy-plugin-postcss");
    eleventyConfig.addPlugin(PostCSSPlugin.default);
}

[purrloftruth]

If I'd figured out that all I needed to do was put a .default on the end of the variable...

That should probably be on the wiki somewhere, too.

[Ryuno-Ki]

https://www.11ty.dev/docs/cjs-esm/#common-js-configuration looks like a good place?

Would mean a PR to change

https://github.com/11ty/11ty-website/blob/e4d7935b30c95911b501c4f922e711790d965fdf/src/docs/cjs-esm.md#configuration

[purrloftruth]

If nobody else gets around to it beforehand, and the circumstances align right for me, I'll try my best to get that done tomorrow afternoon. (Wish I could make a guarantee I could just do it!)