TypeError: Cannot destructure 'undefined' as it is undefined. in highlight.js

Question

Describe the issue/behavior that seems buggy I use "highlight.js": "^11.9.0",

I got this error.

TypeError: Cannot destructure 'undefined' as it is undefined.
    at Ft (index-08cefa63.js:225:186736)
    at lr (index-08cefa63.js:225:189346)
    at compileLanguage (index-08cefa63.js:225:189853)
    at Ln (index-08cefa63.js:226:3940)
    at Object.jn [as highlight] (index-08cefa63.js:226:179)
    at index-08cefa63.js:961:38248
    at Qj (index-08cefa63.js:40:27205)
    at Hk$1 (index-08cefa63.js:40:47522)
    at Ek (index-08cefa63.js:40:40990)
    at jg$1 (index-08cefa63.js:38:3736)

This is my code

import 'highlight.js/styles/atom-one-light.min.css';
import React from 'react';
import hljs from 'highlight.js/lib/core';
import typescript from 'highlight.js/lib/languages/typescript';
import sql from 'highlight.js/lib/languages/sql';
import java from 'highlight.js/lib/languages/java';
import plaintext from 'highlight.js/lib/languages/plaintext';
import { cn } from '../../lib';

hljs.registerLanguage('typescript', typescript);
hljs.registerLanguage('sql', sql);
hljs.registerLanguage('java', java);
hljs.registerLanguage('plaintext', plaintext);

export interface HighLightCodeProps {
  language?: 'typescript' | 'sql' | 'java' | 'plaintext';
  code?: string;
  className?: string;
}

export const HighLightCode = ({
  language = 'plaintext',
  code = '',
  className,
}: HighLightCodeProps) => {
  const [highLightedCode, setHighLightedCode] = React.useState(code || '');

  React.useEffect(() => {
      const result = hljs.highlight(code || '', { language, ignoreIllegals: true });
      setHighLightedCode(result.value);
    } catch (error) {
      console.error(`Highlight.js Error:`, error);
      setHighLightedCode(code || '');
    }
  }, [code, language]);

  return (
    <div className={cn('hljs', className)}>
      {highLightedCode.split('\n').map((str, i) => (
        <React.Fragment key={i}>
          <code dangerouslySetInnerHTML={{ __html: str }} className="break-all"></code>
          <br />
        </React.Fragment>
      ))}
    </div>
  );
};

Use like this,

<HighLightCode
              code={detail}
              language={'java'}
              className="h-full p-2 overflow-auto text-xs"
            />

It works fine in the local environment. But when I deploy to production, the error occurs. I don't know why... Please help me.

It also occurs when I use react-highlight, react-syntax-highlighter. What should I do?

Sample Code or Instructions to Reproduce

Expected behavior

Additional context