Eleventy Config ESM Import Issues

[alexander-ye]

Operating system

macOS Ventura 13.6

Eleventy

3.0.0

Describe the bug

When using ESM imports in the Eleventy config file, I am running I see error logs and the website does not build.

Here for more details, view this snapshot of the broken state: https://github.com/alexander-ye/eleventy-esm-bug-state

Seems related to #3280

Apologies if already fixed in an alpha version or if posting about an already existing thread.

Reproduction steps

1. Clone https://github.com/alexander-ye/eleventy-esm-bug-state
2. npm install (you can use npm versions 20.17, 22.13, 23.6, all fail).
3. npm start

Expected behavior

Eleventy should build and run when using ESM impots/exports, just like it does with cjs imports/exports.

Reproduction URL

https://github.com/alexander-ye/eleventy-esm-bug-state

Screenshots

No response

[Ryuno-Ki]

Pro: I can reproduce.

Caveat: If you remove the leading dot in

https://github.com/alexander-ye/eleventy-esm-bug-state/blob/94531e36c6eac474688b3f237de3b45bb9148826/.eleventy.js#L3

➡ import { byDisplayOrder } from './src/utils/sort-by-display-order.js'; (so it looks up the current directory (= .) instead of the parent one (= ..)

the error you describe will go away.

Con: You'll see another error

collection.sort is not a function (via TypeError)

https://github.com/alexander-ye/eleventy-esm-bug-state/blob/94531e36c6eac474688b3f237de3b45bb9148826/src/utils/sort-by-display-order.js#L8

The reason here: Your byDisplayOrder is already the comparison function (i.e. its arguments should be a and b). The Array is assigned to out.

[alexander-ye]

Ah nice catches, those are typos on my part; I copied over the wrong file when pushing (I was playing around with different sorting implementations to see if the error was an implementation error with a wrong error message or not, the original version called sortFunction(collection)) and left the repo in a broken state.

For the import bug, I pushed the version after the initial bug, which states, Did you mean to import ../src/utils/sort-by-display-order.js?. When I just import ./src/utils/sort-by-display-order.js, I see the first error message.

Interestingly, when I delete my repo directory and clone it, the import bug doesn't show up. Strange.

But in an existing repo with a correct sorting implementation and a correct import path, the first error shows up:

[11ty] Eleventy Error (CLI):
[11ty] 1. Error in your Eleventy config file '.eleventy.js'. You may need to run `npm install`. (via EleventyConfigError)
[11ty] 2. Cannot find module '.../eleventy-esm-bug-state/src/utils/sort-by-display-order' imported from .../eleventy-esm-bug-state/.eleventy.js
[11ty] Did you mean to import ../src/utils/sort-by-display-order.js?
[11ty] 
[11ty] Original error stack trace: Error [ERR_MODULE_NOT_FOUND]: Cannot find module '.../eleventy-esm-bug-state/src/utils/sort-by-display-order' imported from .../eleventy-esm-bug-state/.eleventy.js
[11ty] Did you mean to import ../src/utils/sort-by-display-order.js?
[11ty]     at new NodeError (node:internal/errors:405:5)
[11ty]     at finalizeResolution (node:internal/modules/esm/resolve:327:11)
[11ty]     at moduleResolve (node:internal/modules/esm/resolve:980:10)
[11ty]     at defaultResolve (node:internal/modules/esm/resolve:1206:11)
[11ty]     at nextResolve (node:internal/modules/esm/hooks:864:28)
[11ty]     at resolve (file://.../eleventy-esm-bug-state/node_modules/@11ty/eleventy/src/Util/EsmResolver.js:47:9)
[11ty]     at nextResolve (node:internal/modules/esm/hooks:864:28)
[11ty]     at Hooks.resolve (node:internal/modules/esm/hooks:302:30)
[11ty]     at handleMessage (node:internal/modules/esm/worker:196:24)
[11ty]     at Immediate.checkForMessages [as _onImmediate] (node:internal/modules/esm/worker:138:28)

Might be one of those strange npm bugs that just requries you to delete your node_modules and package_lock and reinstall?

[Ryuno-Ki]

I can see three dots in the import path. On purpose?

[alexander-ye]

The error message ... is on hidden purpose, yes—it's the /User/path/to/repo/ filepath.

[Ryuno-Ki]

Interestingly, when I delete my repo directory and clone it, the import bug doesn't show up. Strange.

Exactly. I cannot reproduce on top of 42571c9989e89cde5b0758923cfe9edb6be7127a.

The error message ... is on hidden purpose, yes—it's the /User/path/to/repo/ filepath.

In those cases I tend to go with something like $PROJECT_ROOT :)

[alexander-ye]

That's a great suggestion! I'll make that change

[uncenter]

To confirm, @alexander-ye it looks like your original issue is now solved - that extra leading dot in the import path being the issue?