Node-native TS imports fail with --serve and --watch

[chriskrycho]

This appears to be similar to #2 and #4, but for files whose extension is .ts. After updating to Eleventy v3 and Node 23, I was able to get full end-to-end builds working after dropping ts-node and switching entirely to using Node’s new built-in support for TS type stripping. However, when trying to run a --serve or --watch, I would end up with this:

[11ty] Copied 56 Wrote 930 files in 3.51 seconds (3.8ms each, v3.0.0)
[11ty] Eleventy Error (Watch CLI):
[11ty] 1. A problem was encountered looking for JavaScript dependencies in ESM file: ./site/json-feed.11ty.js. This only affects --watch and --serve behavior and does not affect your build. (via EleventyBaseError)
[11ty] 2. Unexpected token (5:12) (via SyntaxError)
[11ty] 
[11ty] Original error stack trace: SyntaxError: Unexpected token (5:12)
[11ty]     at pp$4.raise (/Users/chris/dev/chriskrycho/v5.chriskrycho.com/node_modules/.pnpm/[email protected]/node_modules/acorn/dist/acorn.js:3646:15)
[11ty]     at pp$9.unexpected (/Users/chris/dev/chriskrycho/v5.chriskrycho.com/node_modules/.pnpm/[email protected]/node_modules/acorn/dist/acorn.js:772:10)
[11ty]     at pp$9.expectContextual (/Users/chris/dev/chriskrycho/v5.chriskrycho.com/node_modules/.pnpm/[email protected]/node_modules/acorn/dist/acorn.js:726:43)
[11ty]     at pp$8.parseImport (/Users/chris/dev/chriskrycho/v5.chriskrycho.com/node_modules/.pnpm/[email protected]/node_modules/acorn/dist/acorn.js:1852:12)
[11ty]     at pp$8.parseStatement (/Users/chris/dev/chriskrycho/v5.chriskrycho.com/node_modules/.pnpm/[email protected]/node_modules/acorn/dist/acorn.js:948:51)
[11ty]     at pp$8.parseTopLevel (/Users/chris/dev/chriskrycho/v5.chriskrycho.com/node_modules/.pnpm/[email protected]/node_modules/acorn/dist/acorn.js:829:23)
[11ty]     at Parser.parse (/Users/chris/dev/chriskrycho/v5.chriskrycho.com/node_modules/.pnpm/[email protected]/node_modules/acorn/dist/acorn.js:601:17)
[11ty]     at Function.parse (/Users/chris/dev/chriskrycho/v5.chriskrycho.com/node_modules/.pnpm/[email protected]/node_modules/acorn/dist/acorn.js:651:37)
[11ty]     at Object.parse (/Users/chris/dev/chriskrycho/v5.chriskrycho.com/node_modules/.pnpm/[email protected]/node_modules/acorn/dist/acorn.js:6133:19)
[11ty]     at findByContents (/Users/chris/dev/chriskrycho/v5.chriskrycho.com/node_modules/.pnpm/@[email protected]/node_modules/@11ty/dependency-tree-esm/main.js:49:18)

On chasing that down, I found that it was just happening on an import type statement (here, but if I switch that out, it just errors on the next such). At a basic level, it just looks like Acorn sees TS-specific stuff and bails (I haven’t dug any further than that).

Otherwise, the switch was fairly mechanical and once I had cleared a couple other issues related to the v3 upgrade, things “just worked”, and it was a little faster (though not all that much: most of the work here isn’t compiling ~1600 lines of TS).

Hopefully this is helpful for other folks trying it out who may hit the same thing!

[uncenter]

Looks like Acorn doesn't plan on adding TypeScript parsing support - acornjs/acorn#1162. I found https://typescript-eslint.io/packages/typescript-estree/, but it calls the TypeScript compiler (tsc) under the hood. Looking at Node.js type stripping implementation, we might actually be able to reuse the package Node publishes for our own type stripping: https://github.com/nodejs/amaro. Usage looks quite simple (const { code } = amaro.transformSync("const foo: string = 'bar';", { mode: "strip-only" });). However it should be noted that amaro is quite large, at 3.6MB minified (1.3MB gzip).