Use of Eleventy() constructor and configuration in TS-based projects

[pauleveritt]

Operating system

macOS Sonoma 14.5

Eleventy

3.0 alpha 17

Describe the bug

In a tsm setup, I'd like to do Vitest testing with new Eleventy() and point at a stub directory for a site. This leads to problems when trying to point at a config file (and thus managing your own configuration.) If I point new Eleventy() at my regular site, with no attempt at managing configuration, things work ok.

Reproduction steps

I have a reproducible repo.

Expected behavior

No response

Reproduction URL

https://github.com/pauleveritt/eleventy-test-config

Screenshots

Attached is a WebM video walkthrough. config.webm

[pauleveritt]

With beta1 I can't get an import in a TS file that works. My previous import:

import Eleventy from "@11ty/eleventy/src/Eleventy";

...now fails with:

Error: Missing "./src/Eleventy" specifier in "@11ty/eleventy" package
    at e (file:///Users/pauleveritt/projects/pauleveritt/www.pauleveritt.org/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:46568:25)
    at n (file:///Users/pauleveritt/projects/pauleveritt/www.pauleveritt.org/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:46568:627)
    at o (file:///Users/pauleveritt/projects/pauleveritt/www.pauleveritt.org/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:46568:1297)
    at resolveExportsOrImports (file:///Users/pauleveritt/projects/pauleveritt/www.pauleveritt.org/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:47189:18)
    at resolveDeepImport (file:///Users/pauleveritt/projects/pauleveritt/www.pauleveritt.org/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:47212:25)
    at tryNodeResolve (file:///Users/pauleveritt/projects/pauleveritt/www.pauleveritt.org/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:46977:16)
    at ResolveIdContext.resolveId (file:///Users/pauleveritt/projects/pauleveritt/www.pauleveritt.org/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:46727:19)
    at PluginContainer.resolveId (file:///Users/pauleveritt/projects/pauleveritt/www.pauleveritt.org/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:49506:17)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async TransformPluginContext.resolve (file:///Users/pauleveritt/projects/pauleveritt/www.pauleveritt.org/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:49666:15)

Obviously an import into src/Eleventy looks fishy. My IDE (WebStorm) can't find a symbol Eleventy. I tried shortening to:

import Eleventy from "@11ty/eleventy";

But it didn't get far enough to generate a traceback.

[zachleat]

hey @pauleveritt I think your repo might be private! https://github.com/pauleveritt/eleventy-test-config

[pauleveritt]

JFC, I do that every time. Fixed, sorry!

[zachleat]

I made a few changes but I believe it’s just a simple pathing issue in your test setups: https://github.com/pauleveritt/eleventy-test-config/pull/1

[pauleveritt]

tl;dr File extensions during config, likely use of Node import.

Thanks a bunch Zach. On to the error that was getting me stuck before, which is more material. In the config file I added an import:

import { MainLayout } from "../../../_includes/MainLayout.11ty.tsx";

This generates the following exception when running tests:

EleventyConfigError: Error in your Eleventy config file 'tests/stubs/general/eleventy.config.js'.
 ❯ TemplateConfig.requireLocalConfigFile node_modules/@11ty/eleventy/src/TemplateConfig.js:400:6
 ❯ TemplateConfig.mergeConfig node_modules/@11ty/eleventy/src/TemplateConfig.js:426:41

You're catching and re-raising so I set a debugger breakpoint. Here's the actual problem from the original error:

Unknown file extension ".tsx" for /Users/pauleveritt/projects/pauleveritt/eleventy-test-config/_includes/MainLayout.11ty.tsx

Stepping through the debugger, I believe it's in dynamicImportAbsolutePath, line 108:

promise = import(urlPath);

When this promise gets resolved, I believe there's a Node import problem with file extensions.

If I change the eleventy.config.js import so something ending in .js, no problem.