非法進口聲明吞噬反應

我正在嘗試將React與ES6引入到我的應用程序中，該應用程序使用Gulp構建。我可以讓React單獨工作，而ES6獨自工作。但試圖import崩潰我的Gulp構建。咕嘟咕嘟的錯誤是：非法進口聲明吞噬反應

第14行：非法進口報關

我的HTML頁面包括反應，並內置JS文件：

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

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

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？

來源

2017-06-18 Alan P.

你必須在es6module選項適用於gulp-react允許導入模塊的：

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

然後，解決您的import語句。由於Child導出爲默認，導入這樣的：

import Child from './child.js';

注：gulp-react是贊成不贊成gulp-babel，所以我建議您使用，而不是如果你已經在使用它es2015。使用gulp-babel，而不是和安裝巴貝爾react預設：

npm install --save-dev babel-preset-react

最後，它適用於gulp-babel：

presets: ['es2015', 'react']

來源

2017-06-18 21:00:21 Li357

謝謝安德魯。我認爲這很有效，但是在做完這個之後，我又遇到了一個錯誤。在瀏覽器中，我得到了一個來自require'Module name xxx還沒有加載上下文'的控制檯錯誤。所以我放棄了Babel，並使用Webpack來編譯React代碼，現在看起來不錯。 –

@AlanP。哦，是的。 Babel實際上並不是一個模塊加載器，它只是一個轉譯器，因此會發生錯誤。使用Webpack還可以轉換Web的模塊，並且還有很長的路要走。 – Li357

-2

嘗試

import Child from './child';

來源

2017-06-18 20:52:51

儘管此代碼可以回答這個問題，提供了關於如何和/或爲什麼它解決了額外的上下文問題會改善答案的長期價值。 – Badacadabra

@Badacadabra我不介意點和聲譽。我提供了工作代碼，上面的用戶回答瞭解釋，因此沒有必要給出和安德魯一樣的解釋。 **如果他沒有提供解釋的答案，我會添加解釋。 –

非法進口聲明吞噬反應

回答

相關問題