Introducing Dark Style Sheet Error

[Ericzhang528]

Describe the bug
Introducing Dark Style Sheet Error
To Reproduce
This is my environment version information

  "dependencies": {
    "antd": "^5.4.5",
    "axios": "^1.3.6",
    "gray-matter": "^4.0.3",
    "js-cookie": "^3.0.5",
    "next": "^13.1.1",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-copy-to-clipboard": "^5.0.3",
    "react-dom": "^18.2.0",
    "react-markdown": "^7.0.1",
    "react-router-dom": "^6.10.0",
    "react-syntax-highlighter": "^15.4.5",
    "remark-gfm": "^3.0.1"
  },
  "engines": {
    "node": ">=14.6.0"
  }

This is my Code

import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
const MdCompile = ({ markdown }) => {
  return (
    <div>
      <h1>Record</h1>
      <ReactMarkdown children={markdown} remarkPlugins={[remarkGfm]}  components={{
        code({node, inline, className, children, ...props}) {
          const match = /language-(\w+)/.exec(className || '')
          return !inline && match ? (
            <SyntaxHighlighter
              {...props}
              style={dark}

              children={String(children).replace(/\n$/, '')}
              language={match[1]}
              PreTag="div"
            />
          ) : (
            <code {...props} className={className}>
              {children}
            </code>
          )
        }
      }}/>
    </div>
  );
};

export default MdCompile

Expected behavior
Can import style sheets normally
Screenshots
This is the error message printed on the console

node_modules/react-syntax-highlighter/dist/esm/styles/prism/index.js:1
export { default as coy } from './coy';