ERR_REQUIRE_ESM when watching or serving a site located in a subdirectory of a module package

[benblank]

Operating system

Debian GNU/Linux 11 (bullseye)

Eleventy

3.0.0-alpha.4

Describe the bug

While canarying 3.0.0, I've discovered that trying to watch or serve a site which isn't at the top level of the package (i.e. package.json and eleventy.config.js aren't in the same directory) results in Node throwing "ERR_REQUIRE_ESM" from @11ty/dependency-tree, at least for packages with { "type": "module" }.

The site builds fine, both when omitting the --watch and --serve flags and also during the initial build before watching begins; the error occurs only when starting the filesystem watching.

Reproduction steps

1. Create and enter an empty directory.
2. echo '{ "name": "repro", "version": "0.0.1", "type": "module" }' > package.json
3. npm install @11ty/[email protected]
4. echo '# A page' > index.md
5. echo 'export default {};' > eleventy.config.js
6. ./node_modules/.bin/eleventy --watch
7. (Eleventy builds the site and begins watching the filesystem.)
8. Press Ctrl-C.
9. rm -rf _site
10. mkdir www
11. mv index.md eleventy.config.js www/
12. cd www
13. ../node_modules/.bin/eleventy --watch
14. (Eleventy builds the site, but encounters "ERR_REQUIRE_ESM" when setting up filesystem watching.)
15. echo '{ "type": "module" }' > package.json (Note that this is still inside the www subdirectory.)
16. ../node_modules/.bin/eleventy --watch
17. (Eleventy is once again able to watch the filesystem after building.)

Expected behavior

I expected to be able to use --watch or --serve when in a subdirectory of my package, which currently works with Eleventy 2.0.x.

The reason I do this is that it allows me to separate the site content from the supporting code I've written (e.g. "scripts/…"), so I can better organize my package. It also makes it easier to use TypeScript in my "JavaScript" templates (….11ty.ts).

Reproduction URL

No response

Screenshots

$ ../node_modules/.bin/eleventy --watch
[11ty] Writing _site/index.html from ./index.md (liquid)
[11ty] Wrote 1 file in 0.05 seconds (v3.0.0-alpha.4)
[11ty] Eleventy CLI Error: (more in DEBUG output)
[11ty] require() of ES Module /workspaces/11ty-dependency-tree-repro/www/eleventy.config.js from /workspaces/11ty-dependency-tree-repro/node_modules/@11ty/dependency-tree/main.js not supported.
[11ty] Instead change the require of eleventy.config.js in /workspaces/11ty-dependency-tree-repro/node_modules/@11ty/dependency-tree/main.js to a dynamic import() which is available in all CommonJS modules. (via Error)
[11ty] 
[11ty] Original error stack trace: Error [ERR_REQUIRE_ESM]: require() of ES Module /workspaces/11ty-dependency-tree-repro/www/eleventy.config.js from /workspaces/11ty-dependency-tree-repro/node_modules/@11ty/dependency-tree/main.js not supported.
[11ty] Instead change the require of eleventy.config.js in /workspaces/11ty-dependency-tree-repro/node_modules/@11ty/dependency-tree/main.js to a dynamic import() which is available in all CommonJS modules.
[11ty]     at getDependenciesFor (/workspaces/11ty-dependency-tree-repro/node_modules/@11ty/dependency-tree/main.js:58:5)
[11ty]     at getCleanDependencyListFor (/workspaces/11ty-dependency-tree-repro/node_modules/@11ty/dependency-tree/main.js:117:26)
[11ty]     at JavaScriptDependencies.getDependencies (file:///workspaces/11ty-dependency-tree-repro/node_modules/@11ty/eleventy/src/Util/JavaScriptDependencies.js:15:18)
[11ty]     at EleventyWatchTargets.addDependencies (file:///workspaces/11ty-dependency-tree-repro/node_modules/@11ty/eleventy/src/EleventyWatchTargets.js:119:43)
[11ty]     at Eleventy._initWatchDependencies (file:///workspaces/11ty-dependency-tree-repro/node_modules/@11ty/eleventy/src/Eleventy.js:984:27)
[11ty]     at async Eleventy.initWatch (file:///workspaces/11ty-dependency-tree-repro/node_modules/@11ty/eleventy/src/Eleventy.js:940:3)
[11ty]     at async Eleventy.watch (file:///workspaces/11ty-dependency-tree-repro/node_modules/@11ty/eleventy/src/Eleventy.js:1064:3)

[benblank]

I had a chance to spend a bit more time on this today and discovered it's possible to work around the issue by putting a dummy package.json in the directory which contains eleventy.config.js. As long as that file exists in that location and indicates that ES modules are being used, Eleventy is able to watch/serve just fine.

I've updated the repro steps to include this workaround.

[zachleat]

Duplicate of #3200! Sorry you filed yours first but let’s group up over there!