Elementtyp ist ungültig: erwartet eine Zeichenfolge (für eingebaute Komponenten) oder eine Klasse/Funktion (für zusammengesetzte Komponenten) aber habe: Objekt

Question

Ich bin neu bei isomorphem Javascript, also bitte mit ertragen. Ich verwende Gulp in Verbindung mit Babelify, mit Presets es2015, stage0, und reagiere auf einem Express-Server.

Meine Komponente, script.js:

var React = require('react'); 
var ReactDOM = require('react-dom'); 

export class Son extends React.Component { 
    render() { 
    return (
     <div> 
     <h3>Bleh</h3> 
     <p> 
      Paragraph 1 
     </p> 
     </div> 
    ); 
    } 
} 

if(typeof window !== 'undefined') { 
    ReactDOM.render(
    <Son />, 
    document.getElementById('s1') 
); 
} 

Meine Strecken, index.js:

let React = require('react'); 
let ReactDOMServer = require('react-dom/server'); 

let express = require('express'); 
let router = express.Router(); 

import Son from '../public/javascripts/script'; 
// let Son = require('../public/javascripts/script').default; 
console.log(Son); 

/* GET home page. */ 
router.get('/', function(req, res, next) { 
    let testString = ReactDOMServer.renderToString(<Son />); 

    res.render('index', { 
    title: 'Express', 
    react: testString 
    }); 
}); 

module.exports = router; 

Gulp und nodemon sind beide transpiling/Kompilieren in Ordnung. Die console.log-Ausgabe von Son erzeugt ein Null-Objekt: {}. Das Problem ist hier der Export/Import des Moduls; Wenn ich die Klassendeklaration in das Modul routes kopiere und einfüge, ändert sich die Ausgabe in [Function: Son] und die App läuft wie beabsichtigt. Ich habe die anderen Posts darüber gelesen, wie man mit dem Import von Modulen umgeht, und habe alle Lösungen ausprobiert (einschließlich der herkömmlichen es5-Syntax von module.exports = und require(...).default), aber keines hat funktioniert. Jedenfalls wäre es wunderbar, wenn ich dieses Konzept mit es6 richtig nageln könnte.

Answer 1

Sie exportieren einen benannten Export namens Son, anstatt ihn zum Standardexport zu machen.

können Sie entweder Ihren Export ändern:

export default class Son extends React.Component { 

Oder Ihren Import ändern:

import { Son } from '../public/javascripts/script'; 

Sie wahrscheinlich die ehemalige wollen.

Answer 2

Ok, also hier ist das Problem: Browserify war was alles vermasselt und Export/Import zu verhindern. Ich musste zuerst meine Komponente auf eine Zwischenversion von es5 umstellen, die ich in einem anderen Modul benötigen würde und mit browserify für das Frontend bündeln.

.babelrc Datei:

{ "presets": ["es2015", "stage-0", "react"] } 

gulpfile.js:

var gulp = require('gulp'); 
var babel = require("gulp-babel"); 
var browserify = require('browserify'); 
var babelify = require('babelify'); 
var source = require('vinyl-source-stream'); 
var watch = require('gulp-watch'); 
var uglify = require('gulp-uglify'); 

watch(['./source/*.js'], function() { 
    console.log("App has been modified; re-compiling."); 
    gulp.start('default'); 
}); 

// bundles front end after react code transpiles. 
gulp.task('frontEnd', ['reactStuff'], function() { 
    console.log('frontend compiling.'); 
    return browserify('./experimental/script.js') 
     .bundle() 
     .pipe(source('app.js')) 
     .pipe(gulp.dest('./public/javascripts/')); 
}); 

// transpiles react component from jsx and es6 to es5. 
gulp.task('reactStuff', function() { 
    console.log('react compiling.'); 
    return gulp.src('./source/script.js') 
     .pipe(babel()) 
     .pipe(gulp.dest('./experimental/')); 
}); 

// transpiles routes rendering react components on the server to es5. 
gulp.task('routerStuff', function() { 
    console.log('routes compiling.'); 
    return gulp.src('./source/index.js') 
     .pipe(babel()) 
     .pipe(gulp.dest('./routes/')); 
}); 

// default task, loops in all other tasks. 
gulp.task('default', ['reactStuff', 'routerStuff', 'frontEnd'], function() { 
    console.log('done.'); 
});