Datei kann nicht analysiert werden, wenn Webpack verwendet wird, reagieren, read-dom

Question

Ich habe in den letzten paar Stunden mit dem Kopf gehämmert, und ich kann das Problem immer noch nicht lösen. Ich denke, ich habe fast alle Implementierungen ausprobiert, aber ich bekomme es immer noch nicht zur Arbeit.

ERROR Nachricht

ERROR in ./app/main.js 
Module parse failed: /Users/DS/Code/tryouts/react-boilerplate/app/main.js Unexpected token (5:16) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected token (5:16) 
    at Parser.pp.raise (/Users/DS/Code/tryouts/react-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:923:13) 
    at Parser.pp.unexpected (/Users/DS/Code/tryouts/react-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:1490:8) 
    at Parser.pp.parseExprAtom (/Users/DS/Code/tryouts/react-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:333:12) 
    at Parser.pp.parseExprSubscripts (/Users/DS/Code/tryouts/react-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:228:19) 
    at Parser.pp.parseMaybeUnary (/Users/DS/Code/tryouts/react-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:207:17) 
    at Parser.pp.parseExprOps (/Users/DS/Code/tryouts/react-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:154:19) 
    at Parser.pp.parseMaybeConditional (/Users/DS/Code/tryouts/react-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:136:19) 
    at Parser.pp.parseMaybeAssign (/Users/DS/Code/tryouts/react-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:112:19) 
    at Parser.pp.parseExprList (/Users/DS/Code/tryouts/react-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:660:23) 
    at Parser.pp.parseSubscripts (/Users/DS/Code/tryouts/react-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:252:29) 

Das ist mein webpack.config.js

var webpack = require("webpack"); 
    path = require('path'); 

var config = { 
    context: path.join(__dirname, 'app'), 
    entry: [ 
    './main.js', 
    ], 
    output: { 
    path: path.join(__dirname, 'www'), 
    filename: 'bundle.js', 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /src\/.+.js$/, 
     exclude: /node_modules/, 
     // loaders: ['babel', 'babel-loader?presets[]=react,presets[]=es2015'], 
     loaders: ['babel', 'babel-loader'] 
     } 
    ], 
    }, 
    resolveLoader: { 
    root: [ 
     path.join(__dirname, 'node_modules'), 
    ], 
    }, 
    resolve: { 
    root: [ 
     path.join(__dirname, 'node_modules') 
    ], 
    }, 
}; 
module.exports = config; 

Das ist mein package.json

{ 
    "name": "react-boilerplate", 
    "version": "1.0.0", 
    "description": "This is just a simple folder structure template to use for my `React` projects.", 
    "keywords": [], 
    "scripts": { 
    "compile": "webpack", 
    "start": "node server.js", 
    "test": "jest" 
    }, 
    "repository": { 
    "type": "git", 
    "url": "git+https://github.com/dantesolis/react-boilerplate.git" 
    }, 
    "author": "D/S", 
    "license": "MIT", 
    "main": "index.js", 
    "bugs": { 
    "url": "https://github.com/dantesolis/react-boilerplate/issues" 
    }, 
    "homepage": "https://github.com/dantesolis/react-boilerplate#readme", 
    "devDependencies": { 
    "babel": "^6.5.2", 
    "babel-core": "^6.10.4", 
    "babel-loader": "^6.2.4", 
    "babel-preset-react": "^6.11.1", 
    "jest-cli": "^13.2.3", 
    "webpack": "^1.13.1" 
    }, 
    "jest": { 
    "scriptPreprocessor": "./tools/preprocessor.js", 
    "unmockedModulePathPatterns": [ 
     "react" 
    ], 
    "testPathDirs": [ 
     "./src/", 
     "" 
    ] 
    }, 
    "dependencies": { 
    "babel-core": "^6.11.4", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.9.0", 
    "babel-preset-react": "^6.11.1", 
    "express": "^4.14.0", 
    "react": "^15.2.1", 
    "react-dom": "^15.2.1", 
    "react-router": "^2.6.0", 
    "webpack": "^1.13.1", 
    "webpack-dev-middleware": "^1.6.1" 
    } 
} 

main.js

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

ReactDOM.render(<App />, document.getElementById('app')); <= OFFENDING LINE 

App.js

import React from 'react'; 
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router'; 
import Counter from './Counter'; 

export default class App extends React.Component { 
    render() { 
     return (

      <div> 
       <Counter /> 
      </div> 
     ); 
    } 
} 

Danke für die Hilfe

Answer 1

Sie entry von [ 'main.js' ] auf ['Main.js'] ändern müssen, weil Sie über Main.js erwähnt, das hat Anfangsbuchstabe in Großbuchstaben., so wie ich von Ihrer webpack Konfiguration sehe, Ihre Anwendung Code innerhalb app Ordner befinden und es gibt keine jede etwa src Ordner erwähnen, deshalb müssen Sie RegExp von /src\/.+.js$/ zu /\.js$/

{ 
    test: /\.js$/, 
    exclude: /node_modules/, 
    loaders: ['babel', 'babel-loader?presets[]=react,presets[]=es2015'] 
}