Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] markdownShortcutPlugin throws "Prism is not defined" error when minified #491

Open
2 tasks done
dylanpyle opened this issue Jun 12, 2024 · 4 comments
Open
2 tasks done
Labels
bug Something isn't working

Comments

@dylanpyle
Copy link

dylanpyle commented Jun 12, 2024

  • 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
  • ./compile
  • open 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
Screenshot 2024-06-12 at 11 48 51

Screenshot 2024-06-12 at 11 49 23

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.

@dylanpyle dylanpyle added the bug Something isn't working label Jun 12, 2024
@david10sing
Copy link
Contributor

david10sing commented Jun 13, 2024

I've reported it here.

facebook/lexical#5828 (comment)

As a workaround, we've had to use the CDN version of prism and add it to the index.html... It's ugly but fixes it. Still trying to figure out how to avoid needing Prism.

Also @dylanpyle could you also confirm it happens only with production build and not with dev build?

Saw the --minify flag

@petyosi
Copy link
Contributor

petyosi commented Jun 13, 2024

I'm almost certain that the shortcuts assume the inclusion of the default Lexical code block implementation. It's unlikely for Lexical to fix this, I believe. The proper way would be to inline the shortcut implementation in the MDXEditor and maybe drop the reference to @lexical/markdown. Which would be a shame, as the shortcut code is quite complex.

@dylanpyle
Copy link
Author

For what it's worth - based on the docs I thought it was this plugin that provided the Command-[B/U/I/K] shortcuts, but they seem to work without it — so not pressing on my end. Worth updating the docs to specify that?

@jjanczur
Copy link

Is there any update on fixing it? I encountered the same issue 🥲

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants