When using tsx and pnpm, eleventy fails to run dev server (workaround included)

[kjkent]

Operating system

Arch Linux

Eleventy

v3.0.0-alpha.14

Describe the bug

There has been plenty discussion and ongoing work around TypeScript support and pnpm support, (#577, #2876, #2849) to name a few, the last of which is an intersection of the two! Not mentioned; however, is this issue I encountered trying to use TSX templates following the docs, the advice in #577 (comment), and the docs-linked guide on the JetBrains website.

When running npx tsx node_modules/.bin/eleventy --config=eleventy.config.ts --serve I get:

λ npm start

> [email protected] start /home/kjkent/sync/dev/web/kjkent_dev
> npx tsx ./node_modules/.bin/eleventy --config=eleventy.config.ts --formats=11ty.tsx --serve --incremental


node:internal/modules/run_main:129
    triggerUncaughtException(
    ^
Error: Transform failed with 1 error:
/home/kjkent/sync/dev/web/kjkent_dev/node_modules/.bin/eleventy.js:2:18: ERROR: Expected ")" but found "\"$(echo \""
    at failureErrorWithLog (/home/kjkent/sync/dev/web/kjkent_dev/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1472:15)
    at /home/kjkent/sync/dev/web/kjkent_dev/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:755:50
    at responseCallbacks.<computed> (/home/kjkent/sync/dev/web/kjkent_dev/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:622:9)
    at handleIncomingPacket (/home/kjkent/sync/dev/web/kjkent_dev/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:677:12)
    at Socket.readFromStdout (/home/kjkent/sync/dev/web/kjkent_dev/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:600:7)
    at Socket.emit (node:events:519:28)
    at addChunk (node:internal/streams/readable:559:12)
    at readableAddChunkPushByteMode (node:internal/streams/readable:510:3)
    at Readable.push (node:internal/streams/readable:390:5)
    at Pipe.onStreamRead (node:internal/stream_base_commons:191:23) {
  name: 'TransformError'
}

Node.js v20.14.0
 ELIFECYCLE  Command failed with exit code 1.

I am uncertain if pnpm swaps out executables, or whether node_modules/.bin/eleventy is supposed to contain:

#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")

case `uname` in
    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
esac

if [ -z "$NODE_PATH" ]; then
  export NODE_PATH="<redacted for brevity>"
else
  export NODE_PATH="<redacted for brevity>"
fi
if [ -x "$basedir/node" ]; then
  exec "$basedir/node"  "$basedir/../@11ty/eleventy/cmd.cjs" "$@"
else
  exec node  "$basedir/../@11ty/eleventy/cmd.cjs" "$@"
fi

As TypeScript is getting official support and PRs regarding pnpm have been merged, I thought it might be helpful to mention this error, as it's elicited by using the commands in the 11ty docs.

The workaround was to use the cmd.cjs file directly, as is done in the JetBrains-posted guide I link to above: npx tsx node_modules/@11ty/eleventy/cmd.cjs --config=eleventy.config.ts --serve

It was a quick fix and I hope by posting here, I can save someone a headache :)

Reproduction steps

1. Have the following project setup:

// package.json
// ...
    "scripts": {
  	  "start": "npx tsx node_modules/.bin/eleventy --config=eleventy.config.ts --serve",
  	  "build": "npx tsx node_modules/.bin/eleventy --config=eleventy.config.ts"
    },
    "packageManager": "[email protected]",
    "devDependencies": {
  	  "@11ty/eleventy": "^3.0.0-alpha.14",
  	  "jsx-async-runtime": "^0.3.0", // Also occurs with react-dom
  	  "react-dom": "^18.3.1", // Also occurs with jsx-async-runtime
  	  "tsx": "^4.16.2"
    }
// ...

// eleventy.config.ts
import 'tsx/esm';
import { jsxToString } from 'jsx-async-runtime';

export default function (eleventyConfig: any) {
    eleventyConfig.addTemplateFormats('11ty.ts,11ty.tsx,md');
    eleventyConfig.addExtension(['11ty.ts', '11ty.tsx'], { key: '11ty.js' });

    // This config uses `jsx-async-runtime`, however the same results are seen
    //   when using `react-dom` as shown in the 11ty docs
    eleventyConfig.addTransform(
  	  'tsx', async (content: JSX.Element): Promise<string> => {
  		  const result = await jsxToString(content);
  		  return `<!doctype html>\n${result}`;
  	  }
    )
    return {
  	  dir: {
  		  input: 'src',
  		  output: 'dist',
  		  includes: 'include',
  		  layouts: 'layout',
  	  },
    };
}

// src/index.11ty.tsx
export const render = (): JSX.Element => {
    return <h1>Please work, I beg you.</h1>;
};

2. Start the dev server with npm start
3. Observe described error message in console
4. Replace node_modules/.bin/eleventy in package.json with node_modules/@11ty/eleventy/cmd.cjs and rerun
5. It works!

Expected behavior

Eleventy compiles the TSX and runs the dev server.

Reproduction URL

No response

Screenshots

No response

[kjkent]

Update: Using jsx-async-runtime, as demonstrated in the JetBrains guide, works. However, using react-dom as described in the docs gives the following error:

> [email protected] start /home/kjkent/sync/dev/web/kjkent_dev
> npx tsx node_modules/@11ty/eleventy/cmd.cjs --config=eleventy.config.ts --serve

[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] 1. Having trouble rendering 11ty.tsx template ./src/index.11ty.tsx (via TemplateContentRenderError)
[11ty] 2. Objects are not valid as a React child (found: object with keys {type, tag, props}). If you meant to render a collection of children, use an array instead. (via Error)
[11ty] 
[11ty] Original error stack trace: Error: Objects are not valid as a React child (found: object with keys {type, tag, props}). If you meant to render a collection of children, use an array instead.
[11ty]     at renderNodeDestructiveImpl (/home/kjkent/sync/dev/web/kjkent_dev/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6194:11)
[11ty]     at renderNodeDestructive (/home/kjkent/sync/dev/web/kjkent_dev/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6091:14)
[11ty]     at retryTask (/home/kjkent/sync/dev/web/kjkent_dev/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6543:5)

# ... lots of stack trace 

Edit 2: Now using v3.0.0-alpha.17. With further experimentation, I've found that the docs config now works, with some changes:

• react and react-dom are required as package.json dependencies, even though only the latter is imported within eleventy.config.ts. Omitting react leads to an error like:

  [11ty] Original error stack trace: Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'react' imported from /path/to/project/src/index.11ty.tsx

  It's worth noting that the above applies also to MDX templates; same error if react is not installed.

• "jsx": "react-jsx" is required within tsconfig.json. Without it, Eleventy throws the following:

  [11ty] Original error stack trace: ReferenceError: React is not defined

@zachleat it seems the errors from the issue and this comment (which I now realise are two different issues) are both docs-based; I'd be happy to put a PR together to address them if that's something you'd find helpful.