[@fujocoded/expressive-code-output] Dynamic require of "path" is not supported error

[alcuadrado]

Hi,

I'm trying to use your expressive-code-output plugin, following the doc, and I get this error as soon as I try to run astro dev with this import in my astro.config.ts:

import { pluginCodeOutput } from "@fujocoded/expressive-code-output";

Error:

> astro dev --host

8:29:36 PM [vite] (ssr) Error when evaluating SSR module /workspaces/website/astro.config.ts: Dynamic require of "path" is not supported
      at file:///workspaces/website/node_modules/.pnpm/@fujocoded+expressive-code-output@0.1.0/node_modules/@fujocoded/expressive-code-output/dist/index.js:11:9
      at ../node_modules/postcss/lib/input.js (file:///workspaces/website/node_modules/.pnpm/@fujocoded+expressive-code-output@0.1.0/node_modules/@fujocoded/expressive-code-output/dist/index.js:3719:35)
      at __require2 (file:///workspaces/website/node_modules/.pnpm/@fujocoded+expressive-code-output@0.1.0/node_modules/@fujocoded/expressive-code-output/dist/index.js:14:50)
      at ../node_modules/postcss/lib/fromJSON.js (file:///workspaces/website/node_modules/.pnpm/@fujocoded+expressive-code-output@0.1.0/node_modules/@fujocoded/expressive-code-output/dist/index.js:4068:18)
      at __require2 (file:///workspaces/website/node_modules/.pnpm/@fujocoded+expressive-code-output@0.1.0/node_modules/@fujocoded/expressive-code-output/dist/index.js:14:50)
      at ../node_modules/postcss/lib/postcss.js (file:///workspaces/website/node_modules/.pnpm/@fujocoded+expressive-code-output@0.1.0/node_modules/@fujocoded/expressive-code-output/dist/index.js:5750:21)
      at __require2 (file:///workspaces/website/node_modules/.pnpm/@fujocoded+expressive-code-output@0.1.0/node_modules/@fujocoded/expressive-code-output/dist/index.js:14:50)
      at file:///workspaces/website/node_modules/.pnpm/@fujocoded+expressive-code-output@0.1.0/node_modules/@fujocoded/expressive-code-output/dist/index.js:11201:30
      at ModuleJob.run (node:internal/modules/esm/module_job:377:25)
      at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:691:26)
[astro] Unable to load your Astro config

Dynamic require of "path" is not supported
  Location:
    /workspaces/website/node_modules/.pnpm/@fujocoded+expressive-code-output@0.1.0/node_modules/@fujocoded/expressive-code-output/dist/index.js:11:9
  Stack trace:
    at file:///workspaces/website/node_modules/.pnpm/@fujocoded+expressive-code-output@0.1.0/node_modules/@fujocoded/expressive-code-output/dist/index.js:11:9
    at __require2 (file:///workspaces/website/node_modules/.pnpm/@fujocoded+expressive-code-output@0.1.0/node_modules/@fujocoded/expressive-code-output/dist/index.js:14:50)
    at __require2 (file:///workspaces/website/node_modules/.pnpm/@fujocoded+expressive-code-output@0.1.0/node_modules/@fujocoded/expressive-code-output/dist/index.js:14:50)
    at __require2 (file:///workspaces/website/node_modules/.pnpm/@fujocoded+expressive-code-output@0.1.0/node_modules/@fujocoded/expressive-code-output/dist/index.js:14:50)
    at ModuleJob.run (node:internal/modules/esm/module_job:377:25)
 ELIFECYCLE  Command failed with exit code 1.

Any idea what can be going wrong?

These are my dependencies

"dependencies": {
    "@astrojs/check": "^0.9.4",
    "@astrojs/partytown": "^2.1.4",
    "@astrojs/starlight": "^0.36.0",
    "@astrojs/vercel": "^8.2.8",
    "@fujocoded/expressive-code-output": "^0.1.0",
    "astro": "^5.6.1",
    "github-slugger": "^2.0.0",
    "gsap": "^3.13.0",
    "prettier": "3.6.2",
    "prettier-plugin-astro": "0.14.1",
    "prettier-plugin-solidity": "2.1.0",
    "sass": "^1.93.2",
    "sharp": "^0.34.2",
    "starlight-links-validator": "^0.18.0",
    "starlight-markdown-blocks": "^0.1.0",
    "starlight-sidebar-topics": "^0.6.1",
    "starlight-sidebar-topics-dropdown": "^0.5.1",
    "typescript": "5.9.3",
    "undici": "^7.16.0"
}

[essential-randomness]

Do you have "type": "module" in your package.json?

Looking around it seems like this would be caused by ESM/CJS issues:

In summary, this runtime error is caused by bundling CJS libraries into ESM context (i.e. bundle express in format: 'esm'). esbuild uses closures to wrap these CJS liraries, and Node.js forbids dynamic (i.e. not at the top level) require on builtin modules.

I believe what I used it for uses ESM (so type module), but I'm happy to take a look if you have a reproduction!

Thank you for using it, makes me happy to see it being useful :)

[alcuadrado]

Yes, it's an ESM project. It's here: https://github.com/NomicFoundation/hardhat-website/tree/starlight-migration

I can try to create a minimal repro tomorrow.

Thanks for creating this plugin :)