fix: fix error with `<Prism />` component in Cloudflare Workers by rururux · Pull Request #15723 · withastro/astro

rururux · 2026-03-02T18:29:22Z

Changes

Ported loadLanguages from prismjs, rewrote them as ESM, and configured them to be loaded in Cloudflare Workers environments.
Accordingly, changed the runHighlighterWithAstro function to an async function.
Updated files that depended on runHighlighterWithAstro to also handle it as an async function.

Fixes a CommonJS-related error that occurred when using the Cloudflare Workers integration with the <Prism /> component in the latest beta of Astro.
The root cause was that the loadLanguages function exported from prismjs used require() and require.resolve() internally.
To work around this, i ported loadLanguages and its dependencies from the prismjs repository, rewrote them as ESM, and configured them to be loaded only in Cloudflare Workers environments.
Initially, i considered simply adding 'prismjs/components/index.js' to optimizeDeps.include in @astrojs/cloudflare, but this approach was abandoned because while require() was replaced, require.resolve() remained as-is and still caused an error.

As mentioned in this comment, I encountered an interesting phenomenon while investigating this issue.
Specifically, statically importing the prismjs module in the workerd environment caused the tests to become flaky, while switching to dynamic import made them stable.
This pull request therefore takes that approach. I've left an explanatory comment in the workerd-specific file.

Reference

loadLanguages: https://github.com/PrismJS/prism/blob/76dde18a575831c91491895193f56081ac08b0c5/components/index.js

Testing

Added a test to verify that the component works without errors in a workerd environment.

Docs

N/A, bug fix

changeset-bot · 2026-03-02T18:29:28Z

🦋 Changeset detected

Latest commit: df376c0

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

rururux · 2026-03-02T18:38:39Z

packages/astro-prism/tsconfig.json

    "rootDir": "./src",
-    "outDir": "./dist"
+    "outDir": "./dist",
+    "types": ["vite/client"]


This line is required to load the type definitions for import.meta.glob().

rururux · 2026-03-02T19:21:29Z

🤔

ematipico · 2026-03-16T15:02:32Z

@rururux if the code that we're attempting to load is CJS, we should use vite.resolve.optimiseDeps and add the file to it, that should work

rururux · 2026-03-17T11:24:26Z

@ematipico

Thank you for the suggestion! I tried the approach you proposed, and while it does improve stability, prismjs is only depended on by @astrojs/prism within Astro's packages, so for projects using the Cloudflare integration without the <Prism /> component (projects that don't depend on @astrojs/prism), the following log now appears:

20:07:54 [WARN] [vite] Failed to resolve dependency: @astrojs/prism > prismjs, present in ssr 'optimizeDeps.include'
20:07:54 [WARN] [vite] Failed to resolve dependency: @astrojs/prism > prismjs/components.js, present in ssr 'optimizeDeps.include'
20:07:54 [WARN] [vite] Failed to resolve dependency: @astrojs/prism > prismjs/dependencies.js, present in ssr 'optimizeDeps.include'

rururux · 2026-03-17T11:25:06Z

Also, I just noticed there's actually an issue with the implementation in this PR, getLoader().load() was missing an argument that is required when the function passed to load() returns a Promise, which means it wasn't being awaited as expected.
I'll fix this right away.

edit: done

…o the Cloudflare plugin

rururux · 2026-03-17T14:03:20Z

I added a simple detection logic to the Cloudflare Workers integration's Vite plugin that checks whether @astrojs/prism is installed in the current project. By conditionally including prismjs-related files in optimizeDeps.includes based on this result, the log issue should be resolved (verified locally).

One limitation to note: since the check works by reading the package.json in the root folder, it won't detect cases where @astrojs/prism is an indirect dependency of something installed at the root.
I also tried using require.resolve('@astrojs/prism') for the check, but since the test fixtures specify @astrojs/prism as workspace:*, the resolved path doesn't come out as expected, so I went with the package.json approach for now.

If you'd prefer, I can update the Cloudflare integration's test fixtures to install @astrojs/prism from npm instead of workspace:*, and adjust the detection logic accordingly.

ematipico

I need to wrap my head with the new code. There are weird things

packages/astro-prism/src/loadLanguages-workerd.ts

ematipico · 2026-03-18T10:02:30Z

packages/astro-prism/src/loadLanguages-workerd.ts

+			return;
+		}
+
+		const pathToLanguage = `../node_modules/prismjs/components/prism-${lang}.js`;


Can you explain me why we're doing this? This feels very hacky and crawling node_modules could lead to all sorts of things

The reason I'm referencing node_modules directly to load language files is that using import.meta.glob for dynamic package imports causes an error when specifying something like import.meta.glob('prismjs/components/prism-*.js'): Internal server error: Invalid glob: "prismjs/components/prism-*.js" (resolved: "prismjs/components/prism-*.js"). It must start with '/' or './'

Using await import(`prismjs/components/prism-${lang}.js`) also fails with a The above dynamic import cannot be analyzed by Vite. warning.
https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations

So i went with the approach of referencing node_modules directly.

~~I do have one alternative approach in mind that might work, and i'm going to give it a try now.~~

One of the approaches i had in mind doesn't seem to work out.
The tricky part is that the path needs to be statically known at the time of the dynamic import, so the options to work around this would be either pre-writing all language file paths to some file, or passing the paths through a virtual module from the Cloudflare Workers integration plugin.

packages/astro-prism/src/loadLanguages-workerd.ts

rururux · 2026-03-19T03:14:55Z

I've switched to an approach that uses a virtual module to load Prism language files, but only in the Cloudflare Workers environment.
This eliminates the need to reference import.meta.glob() or /node_modules/ directly.

fix: fix error with <Prism /> component in Cloudflare Workers

9e180c5

github-actions bot added feat: markdown Related to Markdown (scope) pkg: integration Related to any renderer integration (scope) labels Mar 2, 2026

rururux added 2 commits March 3, 2026 03:33

add vite as a devDependency

8b7157c

omg

0a5445d

rururux commented Mar 2, 2026

View reviewed changes

fix knip error

bf6b547

rururux marked this pull request as draft March 2, 2026 19:21

try replacing all static imports of prism with dynamic imports

d57df04

This comment was marked as outdated.

Sign in to view

rururux added 3 commits March 3, 2026 23:05

remove unnecessary files

fe8ec4f

oops

da6244c

add explanatory comment

86564b3

rururux marked this pull request as ready for review March 3, 2026 14:39

rururux added 2 commits March 4, 2026 00:00

Merge branch 'main' into v6-cf-prism

9e098d4

Merge branch 'main' into v6-cf-prism

e334379

ematipico assigned ematipico and rururux Mar 16, 2026

rururux added 2 commits March 17, 2026 20:41

add loadChainer and verify that the language data is loading correctly

8efd4b2

change to use static import and add `@astro/prism detection logic t…

79d01a3

…o the Cloudflare plugin

ematipico reviewed Mar 18, 2026

View reviewed changes

load prism language data files from a virtual module

3b1a04a

remove vite from astro-prism's dependencies

37b971f

rururux added 2 commits March 19, 2026 12:48

Merge branch 'main' into v6-cf-prism

68f5b01

Merge branch 'main' into v6-cf-prism

df376c0

rururux mentioned this pull request Mar 28, 2026

[v6] <Prism /> component throws an error on pnpm astro dev when used with the Cloudflare Workers integration #15722

Closed

1 task

Uh oh!

Conversation

rururux commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Reference

Testing

Docs

Uh oh!

changeset-bot bot commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

rururux Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

rururux commented Mar 2, 2026

Uh oh!

This comment was marked as outdated.

ematipico commented Mar 16, 2026

Uh oh!

rururux commented Mar 17, 2026

Uh oh!

rururux commented Mar 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rururux commented Mar 17, 2026

Uh oh!

ematipico left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ematipico Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

rururux Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rururux Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

rururux commented Mar 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

rururux commented Mar 2, 2026 •

edited

Loading

changeset-bot bot commented Mar 2, 2026 •

edited

Loading

rururux commented Mar 17, 2026 •

edited

Loading

rururux Mar 18, 2026 •

edited

Loading