以下项目在本地工作（我使用 create-react-app 构建它）但是当将它移到 codepen 时它不起作用并且它让我发疯（它在控制台中给我一个模糊的错误Uncaught ReferenceError: require is not defined），任何帮助将不胜感激：

https://codepen.io/bahax/pen/ExPzbgZ?editors=0010

这是 SOF 编辑器建议的代码：

import {Paper, Typography} from 'material-ui/core';

let styles = {
  leftStyles : {
    marginTop: '1vh',
    marginLeft: '1vw',
    width: '48vw',
    minHeight: '93.5vh',
    maxHeight: '93.5vh'
  },
  rightStyles: 
  {
    marginTop: '1vh',
    marginLeft: '1vw',
    width: '48vw',
    minHeight: '93.5vh',
    maxHeight: '93.5vh',
    overflowY: 'auto'
}

class RightPane extends React.Component {

  constructor(props) {
    super(props);
  }

  getMarkdownText(markedText) {
    let rawMarkup = marked(markedText, { sanitize: true });
    return { __html: rawMarkup };
  }

  render() {
    return (
      <div>
        <Paper style={styles.rightStyles} elevation={1}>
          <Typography variant="h5" component="h3">
            Markdown Preview goes here:
      </Typography>
          <div id="preview" dangerouslySetInnerHTML={this.getMarkdownText(this.props.text)} />
        </Paper>
      </div>
    )
  }
}

let LeftPane = ({ onTextChange, text }) => (
  <div>
    <Paper style={styles.leftStyles} elevation={1}>
      <Typography variant="h5" component="h3">
        Right Markdown Here:
        </Typography>
      <Editor text={text} onChange={onTextChange} />
    </Paper>
  </div>
)

class App extends React.Component {
  state = {
    text: "# This is a heading 1\n## This is a heading 2\nMy favorite search engine is [Google](https://google.com).\nAlthough maybe [Duck Duck Go](https://duckduckgo.com) is a better choice.\n\n`class Cool extends React.Component`\n\n```\nimport React from 'react';\nimport { Paper, Typography } from '@material-ui/core';\nimport marked from 'marked';\n```\n\n*   This is the first list item.\n*   Here's the second list item.\n\n    > A blockquote would look great below the second list item.\n\n![Tux, the Linux mascot](https://upload.wikimedia.org/wikipedia/commons/a/af/Tux.png)\n\nI just love **React.js**."
  }

  handleTextChange = (event) => {
    let text = event.target.value;
    console.log(text);
    this.setState({
      text: text
    })
  }

  render() {
    return (
      <div className="container">
        <LeftPane text={this.state.text} onTextChange={this.handleTextChange}/>
        <RightPane text={this.state.text}/>
      </div>
    );
  }
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

我有 babel 预处理器和包含在 codepen 中的所有库。