React + Material UI, require is undefined

I'm trying to use React with Material UI, but I still have the same error: require is not defined. I have this browser error 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')
  );
      

Run codeHide result


Any idea?

+3


source to share


3 answers


You have 2 options:



  • remove since it is a server side function and not client side and do its function.

  • Download and use requirejs and then load it on your client side before the script and use it.

+1


source


I solved the js compilation issue with the jsx command [directory of the entire .js file] [name of the folder to be created]. Like this: 'jsx./newFolder' Then I ran this command: browserify file.js> newFile.js You need to install Browserify first.



+1


source


Have you installed React-Tap-Event-Plugin?

0


source







All Articles