要素型が無効です：文字列（組み込みコンポーネント用）またはクラス/関数（複合コンポーネント用）が必要ですが、オブジェクト：

Question

私は同形のJavascriptを初めて使用しています。私はBabelifyと組み合わせてGulpを使用しています。プリセットes2015、stage0を使用しています。エクスプレスサーバーで反応します。

マイ成分、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') 
); 
} 

マイ経路、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; 

ガルプとnodemonはtranspiling /ファインコンパイルの両方です。 Sonのconsole.log出力は、ヌルオブジェクト（{}）を生成しています。ここで問題となるのは、モジュールのエクスポート/インポートです。クラス宣言をコピーしてroutesモジュールに貼り付けると、出力は[Function: Son]に変更され、アプリケーションは意図したとおりに実行されます。私はモジュールのインポートを扱う方法について他の記事を読んで、すべてのソリューション（従来のes5の構文module.exports =とrequire(...).defaultを含む）を試しましたが、どれも成功しませんでした。とにかく、私がes6を使ってこのコンセプトを適切に釘付けにすることができれば素晴らしいだろう。

Answer 1

デフォルトエクスポートにする代わりに、Sonという名前のエクスポートをエクスポートしています。

あなたの輸出を変更することができ、次のいずれか

export default class Son extends React.Component { 

またはあなたのインポートを変更します。

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

おそらく前者たいです。

Answer 2

これで問題は次のようになります。Browserifyはすべてを混乱させ、エクスポート/インポートを妨害していました。私は最初にコンポーネントを中間のes5バージョンに置き換えなければなりませんでした。これは別のモジュールで必要とし、フロントエンド用にbrowserifyでバンドルすることができます。

.babelrcファイル：

{ "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.'); 
});