@Lexical/react @Lexical/code on Cloudflare pages: Uncaught ReferenceError: Prism is not defined (working in multiple other environments)

[praetoros]

Coming to the remix discussions as the code looks to be working outside of the remix environment to my eyes.

Link to minimal reproduction: https://github.com/praetoros/error-remix-cf-pages-lexical-prism
Based off the code that is working here: https://codesandbox.io/p/sandbox/lexical-rich-text-example-5tncvy

$npm run dev

...

service core:user:worker: Uncaught ReferenceError: Prism is not defined
  at t54rp432g7b.js:39579:5 in node_modules/prismjs/components/prism-clike.js
  at t54rp432g7b.js:82:50
  at t54rp432g7b.js:40988:5 in node_modules/@lexical/code/LexicalCode.dev.js
  at t54rp432g7b.js:82:50
  at t54rp432g7b.js:41663:23 in node_modules/@lexical/code/LexicalCode.js
  at t54rp432g7b.js:82:50 
  at t54rp432g7b.js:45517:27 

Looking at the minified bundle:

var require_prism = __commonJS({
  "node_modules/prismjs/prism.js"(exports, module) {
...
var require_prism_clike = __commonJS({
  "node_modules/prismjs/components/prism-clike.js"() {
    Prism.languages.clike = { //This is where Prism is undefined
      comment: [
...

[praetoros]

copied the exact same minimal replication to next to validate, and it works no problem (styling all broken, but it compiles and loads):

https://github.com/praetoros/error-remix-cf-pages-lexical-prism-working-next

[praetoros]

Have nailed down the cause to be:

import { CodeHighlightNode, CodeNode } from "@lexical/code";

...

initialConfig:
CodeNode,
CodeHighlightNode,

Removing either does not resolve the issue - it looks like having anything imported from "@lexical/code" causes the bundler breakdown documented above.

Sorry if I'm posting nonsense here: out of my depth with this stuff!

[ethan-dorta]

I'm getting this exact error when using Vite, which appears to use the same bundler (Rollup) that Remix does. Next.js does not use the same bundler; perhaps the issue is with how Rollup deals with this module.

[ethan-dorta]

I made a minimum replication that tests out whether or not the error is coming from the bundler beneath it: it does not appear so, as I'm able to get three different bundler systems (two of which are used by Vite) able to import from @lexical/code without any issue. I've made a repo here.

[acusti]

@praetoros @Flarp i am running into this also while using remix with cloudflare-workers. this looks like it must be related to facebook/lexical#5828, but i’ve tried installing lexical 0.14.1, 0.14.3 (right before that change), and 0.14.5 (after that change) and they all result in:

✘ [ERROR] service core:user:<project>: Uncaught ReferenceError: Prism is not defined

    at null.<anonymous> (index.js:50467:5) in node_modules/prismjs/components/prism-clike.js
    at null.<anonymous> (index.js:25:56)
    at null.<anonymous> (index.js:53158:5) in node_modules/@lexical/code/LexicalCode.dev.esm.js
    at null.<anonymous> (index.js:25:56)
    at null.<anonymous> (index.js:53424:5) in node_modules/@lexical/code/LexicalCode.esm.js
    at null.<anonymous> (index.js:25:56)
    at null.<anonymous> (index.js:55624:5) in node_modules/@lexical/markdown/LexicalMarkdown.dev.esm.js
    at null.<anonymous> (index.js:25:56)
    at null.<anonymous> (index.js:55825:5) in node_modules/@lexical/markdown/LexicalMarkdown.esm.js
    at null.<anonymous> (index.js:25:56)

i hacked around this by adding prismjs as a direct dependency ((npm install|yarn add) prismjs), importing it into my app/root.tsx, and defining it on globalThis if not yet defined there.

import Prism from 'prismjs/components/prism-core';
// …
if (typeof globalThis.Prism === 'undefined') {
    globalThis.Prism = Prism;
}

note that this only worked when i was able to fully defer all lexical imports by keeping them contained to a single TextEditor component and using a dynamic import + React.lazy to load and render that component as needed. (i also needed to add @types/prismjs for the typedef files because i’m using typescript)

[jLynx]

What version of lexical and prism did you get this working on?

When I try do import Prism from "prismjs/components/prism-core" I get the error

Could not find a declaration file for module 'prismjs/components/prism-core'. 'c:/Users/user/Documents/Code/NextJS/myrepo/node_modules/prismjs/components/prism-core.js' implicitly has an 'any' type.
  If the 'prismjs' package actually exposes this module, consider sending a pull request to amend 'https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/prismjs'

Here is my npm package versions

 "prismjs": "^1.26.5",
 "@types/prismjs": "^1.26.5",
 "lexical": "^0.23.1",
 "@lexical/code": "^0.23.1",
 "@lexical/react": "^0.23.1",

[vadimkantorov]

I get the same error, can't figure out how to use @lexical/code and @lexical/markdown (which needs @lexical/code and prismjs for rendering triple-backticks) because of this :(

[vadimkantorov]

@praetoros @acusti I think this should be reported as a bug to @lexical/code (https://github.com/facebook/lexical/issues). At least, they could add themselves such a workaround if (typeof globalThis.Prism === 'undefined') {globalThis.Prism = Prism;} if needed

[toddlucas]

I was able to get this solved by importing Prism before @lexical/code, which has the dependency on it. I'm using Vite+React+TypeScript.

import 'prismjs';
import 'prismjs/components/prism-javascript';
...
import { CodeHighlightNode, CodeNode } from '@lexical/code';