ReactJS + Gulp + Reactify + Browserify Elementtyp ist ungültig: eine Zeichenkette erwartet, aber bekam: undefined

Question

ich diese Störung erhalte:

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.

Verzeichnisstruktur ...

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

Dies ist mein 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({ 
 
\t render : function() { 
 
\t \t return (
 
\t \t \t <div className="Main"> 
 
\t \t \t \t <Navbar/> 
 
\t \t \t \t \t <div className="container"> 
 
\t \t \t \t \t \t <SidePanel /> 
 
\t \t \t \t \t \t \t <div className="row"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t) 
 
\t } 
 
}); 
 
ReactDOM.render(
 
\t <Router> 
 
\t \t <Route path="/" components={App}/> 
 
\t </Router>, 
 
document.getElementById('app'));

Mein 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 = { 
 
\t port: 9005, 
 
\t devBaseUrl: 'http://localhost', 
 
\t paths: { 
 
\t \t html: './src/*.html', 
 
\t \t js: './src/**/*.js', 
 
\t \t images: './src/images/*', 
 
\t \t css: [ 
 
     \t \t 'node_modules/bootstrap/dist/css/bootstrap.min.css', 
 
     \t \t 'node_modules/bootstrap/dist/css/bootstrap-theme.min.css', 
 
\t \t \t \t \t './src/css/*.css' 
 
    \t ], 
 
\t \t dist: './dist', 
 
\t \t mainJs: './src/main.js' 
 
\t } 
 
} 
 

 
//Start a local development server 
 
gulp.task('connect', function() { 
 
\t connect.server({ 
 
\t \t root: ['dist'], 
 
\t \t port: config.port, 
 
\t \t base: config.devBaseUrl, 
 
\t \t livereload: true 
 
\t }); 
 
}); 
 

 
gulp.task('open', ['connect'], function() { 
 
\t gulp.src('dist/index.html') 
 
\t \t .pipe(open('', { url: config.devBaseUrl + ':' + config.port + '/'})); 
 
}); 
 

 
gulp.task('html', function() { 
 
\t gulp.src(config.paths.html) 
 
\t \t .pipe(gulp.dest(config.paths.dist)) 
 
\t \t .pipe(connect.reload()); 
 
}); 
 

 
gulp.task('js', function() { 
 
\t browserify(config.paths.mainJs) 
 
\t \t //.transform(babelify) 
 
\t \t .transform(reactify) 
 
\t \t .bundle() 
 
\t \t .on('error', console.error.bind(console)) 
 
\t \t .pipe(source('bundle.js')) 
 
\t \t .pipe(gulp.dest(config.paths.dist + '/scripts')) 
 
\t \t .pipe(connect.reload()); 
 
}); 
 

 
gulp.task('css', function() { 
 
\t gulp.src(config.paths.css) 
 
\t \t .pipe(concat('bundle.css')) 
 
\t \t .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() { 
 
// \t return gulp.src(config.paths.js) 
 
// \t \t .pipe(lint({config: 'eslint.config.json'})) 
 
// \t \t .pipe(lint.format()); 
 
// }); 
 

 
gulp.task('watch', function() { 
 
\t gulp.watch(config.paths.html, ['html']); 
 
\t 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({ 
 
\t render: function() { 
 
\t \t return (
 
\t \t \t <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> 
 
\t \t \t </div> 
 
\t \t); 
 
\t } 
 
}); 
 

 
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;

ES5-Syntax

Answer 1

Sie haben components statt component in dergeschrieben..

Answer 2

Ersetzen Sie Ihre main.js mit dieser Datei -

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'));