gulp-reactでの不正なインポート宣言

Question

私はGulpで構築された私のアプリにReact with ES6を導入しようとしています。私はReactを単独で働くことができ、ES6は単独で働くことができます。しかし、importにしようとすると私のギャルプビルドがクラッシュします。ガルプのエラーは次のとおりです。

14行：不正輸入申告

マイHTMLページが反応含まれており、構築されたJSファイル：

import {Child} from './child.js'; 

var Parent = React.createClass({ 
    render: function(){ 
    const y = 3; //es6 works 
    return (
     <div> 
     <div> This is the parent {y}. </div> 
     <Child name="child"/> 
     </div> 
    ) 
    } 
}); 

React.render(<Parent />, document.getElementById('container')); 

：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.min.js"></script> 
    <script src="js/app.js"></script> 

app.jsはこのようになります

child.jsは同じディレクトリにあり、th次のとおりです。

var Child = React.createClass({ 
    render: function(){ 
    return (
     <div> 
     and this is the <b>{this.props.name}</b>. 
     </div> 
    ) 
    } 
}); 

export default Child; 

バベルとES6をコンパイルし、私のガルプファイルの一部：

gulp.task('babel', function(){ 
    gulp.src('js/app.js') 
    .pipe(react()) 
    .pipe(babel({ 
     presets: ['es2015'] 
    })) 
    .pipe(gulp.dest('dist/js')); 
}); 

私はimportを使用してから私を妨げている間違っている/何をしないのですか？あなたのimport文を修正し、次に

.pipe(react({ 
    es6module: true 
})) 

：

Answer 1

を試してみてください。

import Child from './child.js'; 

---

注：Childがデフォルトとしてエクスポートされているので、このようにそれをインポートgulp-reactがgulp-babelの賛成で廃止されましたあなたはすでにes2015のためにそれを使用している場合ので、私はその代わりに使用することをお勧め。このコードは質問に答えるかもしれないが、

presets: ['es2015', 'react'] 

Answer 2

あなたは、モジュールのインポートを可能にするgulp-reactへes6moduleオプションを適用する必要が

import Child from './child';