Language components can fail in Vite/Rolldown production builds because Prism is a free global
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 13k
- Forks
- 1.4k
- Avg merge
- 15h 36m
- Merged PRs (30d)
- 3
Description
Description
Some Prism language component files, for example components/prism-turtle.js and components/prism-sparql.js, reference a free global Prism variable.
This can fail when the components are bundled as ES modules by modern Vite/Rolldown production builds. In our app, importing the components normally:
import Prism from 'prismjs'
import 'prismjs/components/prism-turtle'
import 'prismjs/components/prism-sparql'
resulted in a production white screen with:
ReferenceError: Prism is not defined
The same application worked after transforming those two component modules to make Prism an explicit module binding:
import Prism from 'prismjs'
// original prism-turtle.js or prism-sparql.js code follows
Why this matters
The component files are published in the npm package and are commonly imported by bundler users. They appear to rely on script/global execution semantics, while bundlers may execute them in module scope where a free Prism identifier is not available.
Assigning globalThis.Prism = Prism was not reliable in our production bundle because chunk evaluation order could still execute the language registration before the global assignment was visible.
Environment
prismjs:1.30.0- Vite:
8.0.16 - Production build using Vite/Rolldown
- Browser app using
vue-prism-editor
Workaround used
We added a narrow Vite transform for only these Prism component files:
return `import Prism from 'prismjs'\n${code}`
This allows the package component grammar definitions to be reused without copying the Turtle/SPARQL grammar code into the application.
Expected behavior
Prism language components should be importable from npm in production bundler builds without requiring application-level transforms or copied grammar definitions.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with components/prism-turtle.js and components/prism-sparql.js, then reproduce their imports in a Vite/Rolldown production build. Check whether other published language components use the same free Prism reference; done means affected components import successfully from npm without an application transform or a Prism ReferenceError.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, vite
- Domain
- build-system
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100