2016-11-15 21 views
2

私は反応と磁束を学んでおり、レッスン1ではチュートリアルは失敗しました。JSファイルのWebpack予期しないトークン

This tutorialはすぐに次のエラーで「NPM開始」に破る:

ERROR in ./src/js/main.js 
Module parse failed: /Users/me/Projects/egghead-flux/src/js/main.js Unexpected token (4:16) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected token (4:16) 
at Parser.pp$4.raise (/Users/me/Projects/egghead-flux/node_modules/acorn/dist/acorn.js:2221:15) 

私がJSX <App />一部失敗しているの構文解析を前提とReactDOM.render(<App />, document.getElementById('main'));を理解していないようです。

誰もこの問題が発生しましたか?ノードモジュールの削除/再インストールは何もしません。ビデオに設定ステップがありませんか?

Main.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './components/app'; 
ReactDOM.render(<App />, document.getElementById('main')); 

App.js

import React from 'react'; 
    export default class App extends React.Component { 
     render(){ 
      return <h1>Flux</h1> 
     } 
    } 

webpack.config.js

module.exports = { 
    entry: './src/js/main.js', 
    output:{ 
     path:'./dist', 
     filename: 'bundle.js', 
     publicPath: '/' 
    }, 
    devServer: { 
     inline: true, 
     contentBase: './dist' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: '/\.jsx?$/', 
       exclude: /(node_modules|bower_components)/, 
       loader: 'babel', 
       query:{ 
        presets: ['es2015', 'react'] 
       } 
      } 
     ] 
    } 
} 

package.json

{ 
    "name": "egghead-flux", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "start": "webpack-dev-server" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "flux": "^3.1.0", 
    "react": "^15.3.2", 
    "react-dom": "^15.3.2", 
    "react-router": "^3.0.0" 
    }, 
    "devDependencies": { 
    "babel": "^6.5.2", 
    "babel-loader": "^6.2.7", 
    "babel-preset-es2015": "^6.18.0", 
    "babel-preset-react": "^6.16.0", 
    "webpack": "^1.13.3", 
    "webpack-dev-server": "^1.16.2" 
    } 
} 
+0

私たちといくつかのコードを共有できますか? –

+0

はい、上に追加 – userqwert

+0

'npm start'は何をしようとしますか? – John

答えて

3

が判明:

test: '/\.jsx?$/',

は次のようになります。

test: /\.jsx?$/,

くそ。

+0

ack right yeah、正規表現の文字列と正規表現オブジェクトの大きな違いは..良いキャッチ! – John

+0

ええ、右迷惑!あなたの助けをありがとうジョン私はそれを感謝します。 – userqwert

関連する問題