How to reference Material UI component in local React project

Question

I am trying to set up a simple Flask app which uses React and Material UI (I cannot use Node/NPM for this). react, react-dom and material-ui.js are all being served by Flask out of the static resources path. They load up just fine, but in the very first text/babel function the Button element can't be found. Its there in the material-ui.js but my JSX function can't see it. Is there a way to import the component from the material-ui.js?

My index.html:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <!-- Metas -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />

    <title>F.L.O.P.</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
    <!-- Icons -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />


</head>

<body>
    <!--[if lt IE 7]>
        <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

    <h1>Hello World!!</h1>

    <div id="test"></div>

    <!-- Local React Lib -->
    <script src="static/js/react/react.js"></script>

    <!-- Local React DOM lib-->
    <script src="static/js/react/react-dom.js"></script>

    <!-- Local Material UI Lib -->
    <script src="static/js/material/material-ui.js"></script>

    <!-- Babel -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/babel">
        function App() {
            return (
                <Button variant="contained" color="primary">
                    Hello World
                </Button>
            );
        }
        ReactDOM.render(<App />, document.querySelector('#test'));
    </script>

</body>

</html>

This results in a

Uncaught ReferenceError: Button is not defined

in the console from: Inline Babel script:4 Which is the:

<Button variant="contained" color="primary">

line.

The example for the button is here: https://material-ui.com/getting-started/usage/

95faf8e76605e973 95faf8e76605e973 · Accepted Answer · 2020-09-23T07:25:11

The components will be available inside the MaterialUI object. For the Button component, access it via MaterialUI.Button or destructure it.

<body>
  <div id="test"></div>

  <!-- React -->
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

  <!-- Babel -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <!-- MUI -->
  <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>

  <script type="text/babel">
    const { Button } = MaterialUI;
    
    ReactDOM.render(
      (<Button variant="contained" color="primary">
         Hello
      </Button>), 
      document.getElementById("test") 
    );
  </script>
</body>

How to reference Material UI component in local React project

1 Answers