PrismJS / PrismJS/prism

Language components can fail in Vite/Rolldown production builds because Prism is a free global

Open
#4,088 0 comments 1 reaction 0 assignees View on GitHub

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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.