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

问题

the following project is working locally (I built it using create-react-app) but when moved it to codepen it's not working and it's driving me crazy (it's giving me a vague error in the console Uncaught ReferenceError: require is not defined), any help would be appreciated:

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

here's the code as suggested by SOF editor:

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')
);

I have babel preprocessor and all libraries included as you can see in the codepen.

回答1:

In order to use Material-UI in CodePen you just simply add UMD file you can find it here: https://material-ui.com/getting-started/installation/#cdn

And you can use it like this:

const {Typography} = MaterialUI

There is a full example here: https://github.com/mui-org/material-ui/tree/master/examples/cdn

回答2:

you can use https://codesandbox.io/ this site. to create the project without login here. It will create a link for the project and store it permanently.

来源：https://stackoverflow.com/questions/63150094/react-js-material-ui-project-not-working-on-codepen-although-its-working-locall

标签

reactjs

material-ui

codepen