#Cannot find module 'react/jsx-dev-runtime' 11ty with Bun issue

1 messages · Page 1 of 1 (latest)

cerulean oriole
#

Hello, so I am trying to figure out how to use 11ty + JSX with Bun. I currently have 11ty + JSX with Node (TSX) working but for Bun I keep getting an error.

[11ty] Cannot find module 'react/jsx-dev-runtime' from 'eleventy-jsx/src/index.jsx' (via ResolveMessage)```

I am confused as to why it's looking for react/jsx-dev-runtime when I've set jsxImportSource to use 'jsx-async-runtime':
```json
    "jsx": "react-jsx",
    "jsxImportSource": "jsx-async-runtime",
    "allowJs": true,

Eleventy.config.js:

import { jsxToString } from "jsx-async-runtime";

export default function(eleventyConfig) {
    eleventyConfig.addTemplateFormats("tsx,jsx");
    eleventyConfig.addExtension(["tsx", "jsx"], {
        key: "11ty.js",
        compile: function () {
            return async (data) => {
                let output = await this.defaultRenderer(data);
                output = `<!doctype html>${await jsxToString(output)}`;
                return output;
            };
        },
    });
};

export const config = {
    dir: {
        input: "src",
        output: "dist",
    },
    pathPrefix: "./",
};

src/index.jsx:

export default function Index() {
    return (
        <html>
            <head>
                <title>Document</title>
            </head>
            <body>
                <h1>Hello!</h1>
            </body>
        </html>
    );
}

export const render = Index;

Package.json:

{
  "name": "jsx",
  "module": "index.ts",
  "type": "module",
  "scripts": {
    "eleventy": "npx tsx ./node_modules/.bin/eleventy --config=eleventy.config.js --serve",
    "eleventy-bun": "bun run ./node_modules/.bin/eleventy --config=eleventy.config.js --serve"
  },
  "devDependencies": {
    "@11ty/eleventy": "^3.0.0",
    "@types/bun": "latest",
    "jsx-async-runtime": "^0.6.2",
    "tsx": "^4.19.2"
  },
  "peerDependencies": {
    "typescript": "^5.0.0"
  }
}

Thanks in advance

Screenshot_2025-01-08_at_09.09.11.png
crude elbow
cerulean oriole
#

Previously I have had an index.jsx:

import { escapeEntities, jsxToString } from "jsx-async-runtime";

export default function App() {
  return (
    <>
      {`<!DOCTYPE html>`}
      <html>
        <head>
          <meta charset="utf-8" />
          <title>Todos</title>
        </head>
        <body>
          <Header label="<Todos>" />
          <TodoList quantity={3} />
        </body>
      </html>
    </>
  );
}

function Header({ label }) {
  return (
    <section
      style={{
        "background-color": "red",
        "padding-bottom": "1rem",
      }}
    >
      <h1 style="color: white; text-align: center">{escapeEntities(label)}</h1>
    </section>
  );
}

async function TodoList({ quantity }) {
  const { todos } = await (await fetch("https://dummyjson.com/todos")).json();

  return (
    <table class="table">
      <thead class={{ thead: true, striped: false, sticky: true }}>
        <tr>
          <th>Label</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody class="tbody striped">
        {todos.slice(0, quantity).map(({ todo, completed }) => (
          <tr>
            <td>
              <label for="todo">{escapeEntities(todo)}</label>
            </td>
            <td>
              <label for="status">{completed ? "yes" : "no"}</label>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

console.log(await jsxToString(<App />));

I alter the tsconfig with jsx import source to match the lib and it just works!

cerulean oriole
# crude elbow install `react`

So the solution was this:

bunx --bun @11ty/eleventy --serve

Would anyone know why this didn't work?

bun run ./node_modules/.bin/eleventy --config=eleventy.config.js --serve

I would've assumed by default it would use Bun's runtime and I wouldn't need the --bun CLI flag