Learning ReactJS：キャッチされていないSyntaxError：予期せぬトークンのインポート

私はReactJSを初めて使う人です。私はegghead.ioからコードを実行しようとしていると私は、次のエラーを取得しておいてください。Learning ReactJS：キャッチされていないSyntaxError：予期せぬトークンのインポート

キャッチされないでSyntaxError：予期しないトークン輸入

私は今二回バベルをロードしていると説明したレッスンに沿って続いてきたが、それちょうどhtmlページに読み込まれません。ここではコードです：

index.htmlを

<!DOCTYPE html> 
<html lang = "en"> 

    <head> 
     <meta charset = "UTF-8"> 
     <title>Setup</title> 
    </head> 

    <body> 
     <div id = "app"></div> 
     <script src = "main.js"></script> 
    </body> 
</html>

main.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App2'; 

ReactDOM.render(<App />, document.getElementById('app'))

app2.jsx

import React from 'react'; 
import ReactDom from 'react-dom'; 

class App extends React.Component { 
    render(){ 
    let txt = this.props.txt 
    return <h1>{txt}</h1> 
    } 
} 

App.propTypes = { 
    txt: React.PropTypes.string, 
    cat: React.PropTypes.number.isRequired 
} 

App.defaultProps = { 
    txt: 'this is the default txt' 
} 

ReactDOM render(
    <App cat={5}/>, 
    document.getElementById('app') 
)

package.json

{ 
    "name": "es6-react-setup", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "start": "webpack-dev-server" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "react": "^0.14.3", 
    "react-dom": "^0.14.3" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.14.0", 
    "babel-loader": "^6.2.5" 
    } 
}

助けてください。

出典

2016-09-18 muzzo

あなたは 'ReactDOM.render'を意味していますか？ ESを使用していますか？ – Li357

私はそれを修正しましたが、まだ同じエラーがあります。私はES5とES6を使っています – muzzo

なぜ 'main.js'でレンダリングしないのですか？あなたはまた何もエクスポートしていないので、私はあなたが何をインポートしているのかわかりません – Li357

importは、ES6の構文です。あなたはES6とReactコードをコンパイルするために、npm install babel-preset-es2015 babel-preset-react --save-devが必要です。

あなたのwebpack.config.jsファイル内の2つのパッケージをロードすることができます。

module.exports = { 
    entry: './main.js', 
    output: { 
    path: './', 
    filename: 'index.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
      presets: ['es2015', 'react'] 
     } 
     } 
    ] 
    } 
}

私はそれはあなたを助けることを願っています。

出典

2016-09-19 01:12:02

次のエラーが発生しました： 'module.exports = { ^ SyntaxError：予期しないトークン。モジュール番号：をexports.runInThisContext（vm.js：53：16）（Module._compile（module.js：387：25）） Object.Module._extensions..js（module.js：422：10） at Module .load（module.js：357：32） at Function.Module._load（module。ja：314：12） at Module.require（module.js：367：17） at require（internal/module.js：20：19） at module.exports ' – muzzo

また、すでにbabel-preset-2015を追加しました。とバベルプリセット反応 – muzzo

BabelプリセットをES6とReact用にインストールした後、.babelrcファイルを作成するか、package.jsonファイルをオプトインして有効にする必要があります。ここ

ドキュメント：http://babeljs.io/docs/usage/babelrc/

出典

2017-08-03 23:44:02 Madbreaks

Learning ReactJS：キャッチされていないSyntaxError：予期せぬトークンのインポート

答えて

関連する問題