React Material-UI pure javascript

Question

I'm trying to make Material-UI work in pure javascript (no babel, modules, jsx or such things)

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta charset="utf-8" />
      <title>Bridge Bridge.React.Examples</title>
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
      <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
      <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
      <script crossorigin src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js"></script>
   </head>
   <body>
      <div id="main"></div>
      <script>
         ReactDOM.render(
          React.createElement(Button, {variant: 'contained', color: 'primary'}, 'Hello World'),
          document.getElementById('main')
         );
      </script>
   </body>
</html>

I have this error. Could you please help?

'Button' is not defined

Ryan Cogswell · Accepted Answer · 2019-08-12 22:50:34Z

3

UPDATE For v3 (when this answer was originally written) the window variable was 'material-ui'. In v4 this was changed to 'MaterialUI'. The answer has been updated accordingly.

Since you aren't using JSX in your example, you don't need babel. You just need to define Button before using it via const {Button} = window['MaterialUI'];.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Bridge Bridge.React.Examples</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script crossorigin src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js"></script>
</script>
</head>
<body>
<div id="main"></div>
<script>
    const {
        Button
    } = window['MaterialUI'];

    ReactDOM.render(
        React.createElement(Button, {variant: 'contained', color: 'primary'}, 'Hello World'),
        document.getElementById('main')
    );
</script>
</body>
</html>

edited Aug 12, 2019 at 22:50

answered Feb 11, 2019 at 19:20

Ryan Cogswell

81.8k10 gold badges242 silver badges214 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

justadeveloper Over a year ago

A small note: Today I tested this script with the latest development build of Material UI. The property name for Material UI on the window property has changed from material-ui to MaterialUI. After this small change, the script still works perfectly.

Sood · Accepted Answer · 2019-02-11 18:47:18Z

2

Even if you import material-ui framework, you need to indicate where the Button component has to be found.

The problem is, I'm not sure it's possible without using babel.

You will find a complete exemple here in the Material-UI doc

answered Feb 11, 2019 at 18:47

Sood

897 bronze badges

Comments

Mark Kovalenko · Accepted Answer · 2019-02-11 18:43:42Z

1

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Bridge Bridge.React.Examples</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script crossorigin src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="main"></div>
<script type="text/babel">
    const {
        Button
    } = window['material-ui']

    ReactDOM.render(
        React.createElement(Button, {variant: 'contained', color: 'primary'}, 'Hello World'),
        document.getElementById('main')
    );
</script>
</body>
</html>

answered Feb 11, 2019 at 18:43

Mark Kovalenko

15110 bronze badges

3 Comments

user1576055 Over a year ago

Seems it works. Thank you very much. But it's with babel :-(

Mark Kovalenko Over a year ago

@user1576055 I checked before answering :) It works! Unfortunately, babel is a must for using JSX. Also, check this out: github.com/mui-org/material-ui/blob/master/examples/cdn/…

Ryan Cogswell Over a year ago

This code does not use JSX so babel is unnecessary.

Collectives™ on Stack Overflow

React Material-UI pure javascript

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related