<pre> tag content is sometimes not displayed in GUI

[wolkartt]

Description

The <pre> HTML tag is sometimes not loaded in the GUI. If we refresh the page a few times, variably the content of the <pre> tag may or may not appear.

Notion Test Page ID

https://react-notion-x-demo.transitivebullsh.it/0c322c33381c49bca5083a451c334c39

https://morethan-log.vercel.app/hot-to-make-sitemap-in-next-js

[wolkartt]

I believe there is some problem in prismjs (syntax highlighting). I made a small change to the code, deleting the following block:

const Code = dynamic(() =>
  import("react-notion-x/build/third-party/code").then(async (m) => {
    await Promise.all([
      import('prismjs/components/prism-markup-templating.js'),
      import('prismjs/components/prism-markup.js'),
      import('prismjs/components/prism-bash.js'),
      import('prismjs/components/prism-c.js'),
      import('prismjs/components/prism-cpp.js'),
      import('prismjs/components/prism-csharp.js'),
      import('prismjs/components/prism-docker.js'),
      import('prismjs/components/prism-java.js'),
      import('prismjs/components/prism-js-templates.js'),
      import('prismjs/components/prism-coffeescript.js'),
      import('prismjs/components/prism-diff.js'),
      import('prismjs/components/prism-git.js'),
      import('prismjs/components/prism-go.js'),
      import('prismjs/components/prism-graphql.js'),
      import('prismjs/components/prism-handlebars.js'),
      import('prismjs/components/prism-less.js'),
      import('prismjs/components/prism-makefile.js'),
      import('prismjs/components/prism-markdown.js'),
      import('prismjs/components/prism-objectivec.js'),
      import('prismjs/components/prism-ocaml.js'),
      import('prismjs/components/prism-python.js'),
      import('prismjs/components/prism-reason.js'),
      import('prismjs/components/prism-rust.js'),
      import('prismjs/components/prism-sass.js'),
      import('prismjs/components/prism-scss.js'),
      import('prismjs/components/prism-solidity.js'),
      import('prismjs/components/prism-sql.js'),
      import('prismjs/components/prism-stylus.js'),
      import('prismjs/components/prism-swift.js'),
      import('prismjs/components/prism-wasm.js'),
      import('prismjs/components/prism-yaml.js')
    ])
    return m.Code
  })
)

And including this:

const Code = dynamic(() =>
  import("react-notion-x/build/third-party/code").then(
    (m) => m.Code
  )
)

Now the content of the <pre> is always loaded in the GUI.

[jaktestowac]

We had same issue - and it looks that fix from @wolkartt working.