javascriptangularjsreactjsngreact

Cannot find react component LoginComponent - ng-React

I've been trying to include reactjs in my project with ng-react but when I run the app throws the error "Cannot find react component LoginComponent".

the structure:

index.html:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
        <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="../bower_components/alertify.js/dist/css/alertify.css">
    </head>
    <body ng-app="gameApp">

        <div ng-view=""></div>

        <!-- COMPONENTS -->
        <script src="../bower_components/angular/angular.js"></script>
        <script src="../bower_components/react/react.js"></script>
        <script src="../bower_components/react/react-dom.js"></script>
        <script src="../bower_components/ngReact/ngReact.min.js"></script>
        <script src="../bower_components/angular-route/angular-route.js"></script>
        <script src="../bower_components/angular-resource/angular-resource.js"></script>
        <script src="../bower_components/jquery/dist/jquery.min.js"></script>
        <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        <script src="../bower_components/alertify.js/dist/js/alertify.js"></script>
        <script src="../bower_components/babel/browser.js"></script>
        <!-- SOCKET.IO -->
        <script src="../node_modules/socket.io-client/socket.io.js"></script>

        <!-- REACT COMPONENTS -->
        <script type="text/babel" src="js/components/LoginComponent.js"></script>
        <!-- DIRECTIVES -->
        <script src="js/directives/login.js"></script>
        <!-- JAVASCRIPT FILES -->
        <script src="js/app.js"></script>

        <!-- CONTROLLERS -->
        <script src="js/controllers/login.js"></script>

        <!-- SERVICES -->
        <script src="js/services/commonServices.js"></script>



    </body>
</html>

app.js:

'use strict';

/**
 * @ngdoc overview
 * @name gameApp
 * @description
 * # gameApp
 *
 * Main module of the application.
 */
angular                 //modules
    .module('gameApp', ['ngResource',
                        'ngRoute',
                        'react',
                        //services
                        'commonServices',
                        //directives
                        'loginDirective'
        ])
    .config(function ($routeProvider, $locationProvider) {
        $routeProvider

            .when('/login', {
                templateUrl: 'js/views/login.html',
                controller: 'LoginController'
            })

    });

LoginComponent.js:

login.value('LoginComponent',  React.createClass({

    propTypes: {
        username    : React.PropTypes.string.isRequired
    },

    render: function() {
        return <span>Hi {this.props.username}</span>;
    }
}));

login.js(directive):

'use strict';

var loginDirective = angular.module('loginDirective', []);

loginDirective.directive( 'login', function( reactDirective ) {
  return reactDirective( 'LoginComponent');
} );

login.html(view):

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4 col-md-offset-4">
            <h1 class="text-center login-title">Choose your name</h1>
            <form>
                <div class="form-group">
                    <input type="text" ng-model="username" class="form-control" placeholder="Name" autofocus>
                </div>
                <div class="form-group">
                    <button class="btn btn-lg btn-primary btn-block" ng-click="setUsername()">Enter</button>
                </div>
            </form>
            <login username="username" />
        </div>
    </div>
</div>

login.js(controller):

var login = angular.module('gameApp');
login.controller('LoginController', ['$scope', '$location', 'commonServices',
    function($scope, $location, commonServices) {

        $scope.username = '';

        $scope.setUsername = function() {

            if($scope.username.trim() == '') {

                alertify.error("The name can't be empty");
            } else {
                commonServices.setUsername($scope.username);
                $location.path('/');
            }
        }
    }
]);

Somebody knows whats the problem?

Solution

  • This line: return <span>Hi {this.props.username}</span>; isn't valid JavaScript because it contains JSX so it's breaking the directive. You will need to add a compile step to your workflow if you want to use JSX.

    Check out my blog post to add JSX and ES6 compilation to your project http://blog.tylerbuchea.com/migrating-angular-project-to-react/

    To make sure this is actually the problem try replacing your current LoginComponent code with the code below. I just took your current code and used an online compiler https://babeljs.io/repl/ So the code below should all be valid ES5 JavaScript.

    Try this:

    'use strict';

login.value('LoginComponent', React.createClass({

    propTypes: {
        username: React.PropTypes.string.isRequired
    },

    render: function render() {
        return React.createElement(
            'span',
            null,
            'Hi ',
            this.props.username
        );
    }
}));