React.js Material-UI 项目无法在 codepen 上运行，尽管它在本地运行

Question

以下项目在本地工作（我使用 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 预处理器和所有库，如您在代码笔中看到的那样。

Answer 1

您可以使用 https://codesandbox.io/ 这个网站。在此处无需登录即可创建项目。它将为项目创建一个 link 并永久存储它。

Answer 2

为了在 CodePen 中使用 Material-UI，您只需添加 UMD 文件即可，您可以在此处找到它：https://material-ui.com/getting-started/installation/#cdn

你可以这样使用它：

const {Typography} = MaterialUI

这里有一个完整的例子： https://github.com/mui-org/material-ui/tree/master/examples/cdn

React.js Material-UI 项目无法在 codepen 上运行，尽管它在本地运行

React.js Material-UI project not working on codepen although it's working locally

reactjs

material-ui

codepen