Calling Eleventy constructor in test in ESM project

[pauleveritt]

Operating system

macOS Ventura 13.5.1

Eleventy

2.0.1

Describe the bug

I'm using 11ty+TS+TSX etc. via Vite/esbuild. In a Vitest tests, calling the Eleventy constructor fails in config because requireAbsolute calls require directly.

Repo: https://github.com/pauleveritt/eleventy-vitest

The README has some instructions. The test file has a comment at the end with the traceback:

require() of ES Module /Users/pauleveritt/projects/pauleveritt/eleventy-vitest/eleventy.config.js from /Users/pauleveritt/projects/pauleveritt/eleventy-vitest/node_modules/@11ty/eleventy/src/Util/Require.js not supported.
eleventy.config.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename eleventy.config.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /Users/pauleveritt/projects/pauleveritt/eleventy-vitest/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

Reproduction steps

1. Clone the repo: https://github.com/pauleveritt/eleventy-vitest

2. npm install

3. npm run test

Expected behavior

No response

Reproduction URL

https://github.com/pauleveritt/eleventy-vitest

Screenshots

No response

[simonpai]

According to this issue #836, I assume it's on the roadmap for 3.0.0?

[pauleveritt]

According to this issue #836, I assume it's on the roadmap for 3.0.0?

Possibly. Zac asked in Mastodon for a ticket. I don't mind this being marked as dupe. Perhaps the esbuild-register part is relevant.

[zachleat]

Yes, thank you! I did request this ticket—wanted to make sure I understood the issue correctly! Thank you!

Related: #614 and #2675 too.

[zachleat]

After a little research and cloning the repo, I think the only thing you need to do here is rename your eleventy.config.js to eleventy.config.cjs and it works fine.

Of course, 3.0 will bring ESM support to the eleventy.config.js file so you can use export default function(eleventyConfig) in there, but it doesn’t look like you are trying to do that!

So, good news! This test case is only education and not dependent on the 3.0 release.

[pauleveritt]

Unfortunately that leads to switching to CJS and:

[11ty] Original error stack trace: /Users/pauleveritt/projects/pauleveritt/eleventy-vitest/site/index.11ty.tsx:2
[11ty] import h from "vhtml";
[11ty] ^^^^^^
[11ty] 
[11ty] SyntaxError: Cannot use import statement outside a module
[11ty]     at internalCompileFunction (node:internal/vm:73:18)

I'm ok with leaving this closed and waiting for 3.0.

[zachleat]

What command are you using to run Eleventy? You aren’t removing the "type": "module" from your package.json right? I did test this on your repo and it worked fine with npm start

[pauleveritt]

I should have mentioned: I'm running the tests. Thus: npm run test which is just vitest.

I think I'm screwed. 😉 It's ok for me to just wait for what you're doing. Can't wait for first alpha.