ReactJS + Gulp + Reactify + Browserify元素类型无效：应为字符串，但得到：未定义

Question

I am getting this error:

bundle.js:26912 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

Directory Structure...

 . ├── components │   ├── index.js │   ├── NavBar.js │   └── SignIn.js ├── css │   └── style.css ├── index.html └── main.js 

This is my code: main.js

 var React = require('react'); var ReactDOM = require('react-dom'); var Router = require('react-router').Router; var Route = require('react-router').Route; var Navbar = require("./components/NavBar").default; var SidePanel = require("./components/index").default; var App = React.createClass({ render : function() { return ( <div className="Main"> <Navbar/> <div className="container"> <SidePanel /> <div className="row"> </div> </div> </div> ) } }); ReactDOM.render( <Router> <Route path="/" components={App}/> </Router>, document.getElementById('app')); 

My gulpfile.js

 "use strict"; var gulp = require('gulp'); var connect = require('gulp-connect'); //Runs a local dev server var open = require('gulp-open'); //Open a URL in a web browser var browserify = require('browserify'); // Bundles JS var reactify = require('reactify'); // Transforms React JSX to JS var source = require('vinyl-source-stream'); // Use conventional text streams with Gulp var concat = require('gulp-concat'); //Concatenates files // var lint = require('gulp-eslint'); //Lint JS files, including JSX var babelify = require('babelify'); // support for es6 var config = { port: 9005, devBaseUrl: 'http://localhost', paths: { html: './src/*.html', js: './src/**/*.js', images: './src/images/*', css: [ 'node_modules/bootstrap/dist/css/bootstrap.min.css', 'node_modules/bootstrap/dist/css/bootstrap-theme.min.css', './src/css/*.css' ], dist: './dist', mainJs: './src/main.js' } } //Start a local development server gulp.task('connect', function() { connect.server({ root: ['dist'], port: config.port, base: config.devBaseUrl, livereload: true }); }); gulp.task('open', ['connect'], function() { gulp.src('dist/index.html') .pipe(open('', { url: config.devBaseUrl + ':' + config.port + '/'})); }); gulp.task('html', function() { gulp.src(config.paths.html) .pipe(gulp.dest(config.paths.dist)) .pipe(connect.reload()); }); gulp.task('js', function() { browserify(config.paths.mainJs) //.transform(babelify) .transform(reactify) .bundle() .on('error', console.error.bind(console)) .pipe(source('bundle.js')) .pipe(gulp.dest(config.paths.dist + '/scripts')) .pipe(connect.reload()); }); gulp.task('css', function() { gulp.src(config.paths.css) .pipe(concat('bundle.css')) .pipe(gulp.dest(config.paths.dist + '/css')); }); // Migrates images to dist folder // Note that I could even optimize my images here gulp.task('images', function () { gulp.src(config.paths.images) .pipe(gulp.dest(config.paths.dist + '/images')) .pipe(connect.reload()); //publish favicon gulp.src('./src/favicon.ico') .pipe(gulp.dest(config.paths.dist)); }); // gulp.task('lint', function() { // return gulp.src(config.paths.js) // .pipe(lint({config: 'eslint.config.json'})) // .pipe(lint.format()); // }); gulp.task('watch', function() { gulp.watch(config.paths.html, ['html']); gulp.watch(config.paths.js, ['js']); }); gulp.task('default', ['html', 'js', 'css', 'images', 'open', 'watch']); 

NavBar.js

 var React = require('react'); var Navbar = React.createClass({ render: function() { return ( <div> <nav className="navbar navbar-default"> <div className="container-fluid"> <ul className="nav navbar-nav"> <li><a href="/">Home</a></li> <li><a href="/#authors">Authors</a></li> <li><a href="/#about">About</a></li> </ul> </div> </nav> </div> ); } }); module.exports = Navbar; 

index.js

 var React = require("react"); var SignInForm = require("./SignIn"); var SidePanel = React.createClass({ render: function() { return ( <div className="side-panel"> <div className="col-md-4"> <SignInForm /> </div> </div> ) } }); module.exports = SidePanel; 

Using ES5 syntax

Answer 1

您已在Route ..中编写了components而不是component 。

Answer 2

Replace your main.js file with this -

var React = require('react');
var ReactDOM = require('react-dom');
import {Router, Route, browserHistory} from 'react-router';
var Navbar = require("./components/NavBar");
var SidePanel = require("./components/index");

var App = React.createClass({
    render : function() {
        return (
            <div className="Main">
                <Navbar/>
                    <div className="container">
                        <SidePanel />
                            <div className="row">
                            </div>
                    </div>
            </div>
        )
    }
});
ReactDOM.render((<Router history={browserHistory}><Route path="/" components={App}/></Router>),document.getElementById('app'));