mdx-editor / mdx-editor/editor
[BUG] markdownShortcutPlugin throws "Prism is not defined" error when minified
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.7k
- Forks
- 307
- Avg merge
- 14h 22m
- Merged PRs (30d)
- 5
Description
- I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
- I have read the documentation and cannot find an answer.
Describe the bug
When the markdownShortcutPlugin is enabled - if you build your project using esbuild (a very popular bundler, also used in Vite/etc) with --minify enabled, at runtime the app throws the following error:
bundle.js:170 Uncaught ReferenceError: Prism is not defined
Reproduction
As this is specific to a build process, I've set up a new minimal reproduction repo here as I'm not sure it's possible in codesandbox? https://github.com/dylanpyle/mdxeditor-esbuild
To Reproduce
Steps to reproduce the behavior:
- Clone the repo
npm install./compileopen index.html- Observe the runtime error
To confirm that it's specific to the markdownShortcutPlugin, remove this plugin from app.tsx and run ./compile again; observe that the app now loads successfully.
Expected behavior
The app loads the editor.
Screenshots
Desktop (please complete the following information):
- OS: macOS
- Browser: Chrome 126.0.6478.57
- Dependencies:
"dependencies": {
"@mdxeditor/editor": "3.4.1",
"esbuild": "0.21.5",
"react": "18.3.1",
"react-dom": "18.3.1"
}
Additional context
This issue is not present when the output bundle is not minified.
Contributor guide
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 by cloning the linked reproduction, running npm install, then ./compile and opening index.html. Inspect app.tsx and the markdownShortcutPlugin integration to trace why the minified build references Prism; done means the editor loads successfully with the plugin enabled and minification on.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- build-system, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100