getHighlighter throwing error in react project

Pardon my ignorance but I am new here and may not know how to properly post a question.

I am trying to install and use shiki in my react project. I have installed shiki using yarn and am trying to use getHighlighter to highlight my code. But I am facing this weird error

Also facing below error:

Here is my code:

import React from 'react';

const shiki = require('shiki');

componentDidMount () {
  shiki.getHighlighter({
    theme: 'nord'
  }).then((highlighter) => {
    console.log(highlighter.codeToHtml("console.log('shiki');", "js"));
  }).catch((e) => {
    console.log(e);
  });
}

Shiki version: 0.9.12 React version: 16.14.0 Please help me understand this issue and help me resolve this. What am I missing here?

Steps I followed to install and use shiki:

1. yarn add shiki
2. Import the module using require('shiki') as mentioned above
3. Use the imported module directly in the file where it is imported

Thanks.

[patternina]

In React, you have to insert the HTML markup via dangerouslySetInnerHTML.

Here’s a React component sample:

import { useEffect, useState } from 'react'

const shiki = require('shiki')
shiki.setCDN('https://unpkg.com/shiki/')

const CodeBlock = ({ children }) => {
  const [markupToHighlight, setMarkupToHighlight] = useState(null)

  useEffect(() => {
    ;(async function () {
      setMarkupToHighlight(
        await shiki
          .getHighlighter({
            theme: 'nord'
          })
          .then((highlighter) => highlighter.codeToHtml(children, 'swift'))
      )
    })()
  }, [])

  return (
    <div
      dangerouslySetInnerHTML={{ __html: markupToHighlight }}
      className="shiki-wrapper"
    />
  )
}

export default CodeBlock

[kylebutts]

I’m also looking to try to render server side, but it’s not working with NextJS. Do you have any idea how to fix the above error @pomber?