CODEWITHSUNDEEP
reactjsmaterial-ui
Sabbo
Sabbo

Reputation: 93

React + Material UI, require is not defined

I'm trying to use React with Material UI, but i still have the same error: require is not defined. I have this error on browser for TapEventPlugin, TouchEventPlugin, injectTapEventPlugin and ResponderEventPlugin.

This is the code in my index.html: ` 

    <div id="wrapper">
    </div>

    <script src="js/react.min.js"></script>
    <script src="js/JSXTransformer.js"></script>
    <script src="js/TapEventPlugin.js"></script>
    <script src="js/TouchEventUtils.js"></script>
    <script src="js/injectTapEventPlugin.js"></script>
    <script src="js/ResponderEventPlugin.js"></script>
    <script type="text/jsx" src="js/index.js"></script>
</body>`

And this is my js file: 

var React = require('react/addons');
var injectTapEventPlugin = require('react-tap-event-plugin');
injectTapEventPlugin();
var mui = require('material-ui');
var ThemeManager = new mui.Styles.ThemeManager();
var AppBar = mui.AppBar;

var ApplicationBar = React.createClass({
            render: function(){
                return <AppBar title='Title' iconClassNameRight="muidocs-icon-navigation-expand-more"/>;
            }
        });

React.render(
    <ApplicationBar />,
    document.getElementById('wrapper')
  );

Any idea?

Upvotes: 3

Views: 4133

Answers (2)

Sabbo
Sabbo

Reputation: 93

I solved the problem compiling the js with the command 'jsx [directory of all the file .js] [name of the folder which will be created]. Like this: 'jsx ./ newFolder' Then i run this command: browserify file.js > newFile.js You need to install first Browserify.

Upvotes: 1

Paweł Smołka
Paweł Smołka

Reputation: 638

You got 2 options:

  1. remove require as it is server side function not client side and do your function around.

  2. Download and use requirejs, then load it at your client side before your script and use it.

Upvotes: 1

Related Questions