CODEWITHSUNDEEP
requirejsreactjs
gates
gates

Reputation: 4593

Requiring modules gives module not loaded error

I am trying to write a simple Hello world app in react.js using component based approach. So I am using requie.js. I have 4 files in the same folder namely index.html, index.js,world.js and require.js. I am having a script tag in index.html which will load index.js. But I am loading the world.js via require.js using module.exports, which would result in error. Here is my code
index.html 

<head>
<script src="https://fb.me/react-0.13.3.js"></script>
<!-- In-browser JSX transformer, remove when pre-compiling JSX. -->
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script data-main="index.js" src="require.js"></script>

</script>


</head>

<body>

  <script type="text/jsx" src="index.js"></script>
</body>


index.js

var world = require('./world');

var Hello = React.createClass({
  render:function(){
    return (<div>
        <div>Hello,</div>
        <world/>
      </div>)

  }

})

var element = React.createElement(Hello);

React.render(element,document.body);

world.js

module.exports = React.createClass({
  render: function(){
    return (<div>World!</div)
  }

})

I am intending to show Hello, World. But I'm getting the following errors

Uncaught SyntaxError: Unexpected token <
fbcdn-dragon-a.akamaihd.net/hphotos-ak-xtf1/t39.3284-6/11057100_835863049837306_1087123501_n.js:314 You are using the in-browser JSX transformer. Be sure to precompile your JSX for production - http://facebook.github.io/react/docs/tooling-integration.html#jsx
require.js:8 Uncaught Error: Module name "world" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded
:8000/index.js:5 Uncaught SyntaxError: Unexpected token <

Upvotes: 0

Views: 2665

Answers (2)

Hatem Jaber
Hatem Jaber

Reputation: 2402

First of all, the component "world" should start with an upper case. I went ahead and put the code in a single file so that you can see it a little more clear:

    <!DOCTYPE html>
<html>

<head>

    <title>Hello React!</title>
    <script src="https://fb.me/react-0.13.3.js"></script>
    <!-- In-browser JSX transformer, remove when pre-compiling JSX. -->
    <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx">
    var World = React.createClass({
      render: function(){
        return (
        <div>World!</div>
        );
      }

    });

    var Hello = React.createClass({
      render:function(){
        return (
        <div>
            <div>Hello,
            <World />
            </div>
        </div>
        );

      }

    });

    React.render(<Hello />,document.getElementById('example'));
    </script>
  </body>
</html>

What I would recommend is that you setup a proper environment for development with node and npm installed. I have a project in github that is a skeleton that you can use to get up and running without having to worry about how it works for now: reactjs skeleton.

I hope this helps!

Upvotes: 1

Lyn Headley
Lyn Headley

Reputation: 11588

There are at least three issues here. First, you are not using the correct require syntax for asynchronous loading. Your index.js should be:

define(['world'], function(world) {

    var Hello = React.createClass({
        render:function(){
            return (<div>
                    <div>Hello,</div>
                    <world/>
                    </div>)

        }

    })

    var element = React.createElement(Hello);

    React.render(element,document.body);
});

Second, since index.js and world.js are jsx files, requirejs needs a plugin that will tell it that. Something like:

https://github.com/philix/jsx-requirejs-plugin

Finally, since you are loading index.js via requirejs, you don't need:

<script type="text/jsx" src="index.js"></script>

Upvotes: 0

Related Questions