"npm run build" -Modul Parse-Fehler "Möglicherweise benötigen Sie einen geeigneten Loader, um diesen Dateityp zu verarbeiten."

Question

Bitte bare mit mir. Ich bin neu in diesem "npm, webpack und babel" Geschäft.

Am immer den Fehler am unteren Rand des Codeblocks, wenn i "npm Lauf build" laufen

Ich folgte diesem Tutorial: http://jmfurlott.com/tutorial-setting-up-a-single-page-react-web-app-with-react-router-and-webpack/

# l 
total 36K 
drwxrwxr-x 5 dan dan 4.0K Apr 5 09:35 . 
drwxrwxr-x 10 dan dan 4.0K Apr 1 21:46 .. 
-rw-rw-r-- 1 dan dan 3.1K Apr 5 09:22 backup.js 
drwxrwxr-x 2 dan dan 4.0K Apr 5 09:17 css 
-rw-rw-r-- 1 dan dan 218 Apr 5 09:20 index.html 
drwxrwxr-x 3 dan dan 4.0K Apr 5 16:09 js 
drwxrwxr-x 10 dan dan 4.0K Apr 5 09:16 node_modules 
-rw-rw-r-- 1 dan dan 462 Apr 5 09:18 package.json 
-rw-rw-r-- 1 dan dan 552 Apr 5 09:18 webpack.config.js 
# tree js 
js 
├── app.js 
└── components 
    └── Login.js 

1 directory, 2 files 
# more package.json 
{ 
    "name": "lnkchk", 
    "version": "0.0.0", 
    "description": "lnchk", 
    "main": "index.js", 
    "scripts": { 
    "start": "webpack-dev-server --hot --progress --colors", 
    "build": "webpack --progress --colors" 
    }, 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-loader": "^6.2.4", 
    "react": "^0.14.8", 
    "react-hot-loader": "^1.3.0", 
    "react-router": "^2.0.1", 
    "webpack": "^1.12.14", 
    "webpack-dev-server": "^1.14.1" 
    } 
} 
# more webpack.config.js 
var webpack = require('webpack'); 
module.exports = { 
    entry: [ 
     'webpack/hot/only-dev-server', 
     "./js/app.js" 
    ], 
    output: { 
     path: __dirname + '/build', 
     filename: "bundle.js" 
    }, 
    module: { 
     loaders: [ 
      { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ }, 
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}, 
      { test: /\.css$/, loader: "style!css" } 
     ] 
    }, 
    plugins: [ 
     new webpack.NoErrorsPlugin() 
    ] 

}; 
# more js/app.js 
import React from 'react'; 
import Router from 'react-router'; 
import { DefaultRoute, Link, Route, RouteHandler } from 'react-router'; 

import LoginHandler from './components/Login.js'; 

/* 
let App = React.createClass({ 
    render() { 
    return (
     <div className="nav"> 
     <Link to="app">Home</Link> 
     <Link to="login">Login</Link> 

     <RouteHandler/> 
     </div> 
    ); 
    } 
}); 

let routes = ( 
    <Route name="app" path="/" handler={App}> 
    <Route name="login" path="/login" handler={LoginHandler}/> 
    </Route> 
); 

Router.run(routes, function (Handler) { 
    React.render(<Handler/>, document.body); 
}); 

*/ 
# more js/components/Login.js 
import React from 'react'; 

let Login = React.createClass({ 

    render() { 
    return(<div>Welcome to login</div>); 
    } 
}); 

export default Login; 
# npm run build 

> lnkchk@0.0.0 build /home/dan/dev/isvalidurl/ui 
> webpack --progress --colors 

Hash: d175b2c5e573c3d92579 
Version: webpack 1.12.14 
Time: 634ms 
    [0] multi main 40 bytes {0} [built] [1 error] 
    + 2 hidden modules 

ERROR in ./js/app.js 
Module parse failed: /home/dan/dev/isvalidurl/ui/node_modules/react-hot-loader/index.js!/home/dan/dev/isvalidurl/ui/node_modules/babel-loader/index.js!/home/dan/dev/isvalidurl/ui/node_modules/babel-loader/index.js!/home/dan/dev/isvalidurl/ui/js/app.js Line 3: Unexpected token 
You may need an appropriate loader to handle this file type. 
| /* REACT HOT LOADER */ if (module.hot) { (function() { var ReactHotAPI = require("/home/dan/dev/isvalidurl/ui/node_modules/react-hot-loader/node_modules/react-hot-api/modules/index.js"), RootInstanceProvider = require("/home/dan/dev/isvalidurl/ui/node_modules/react-hot-loader/RootInstanceProvider.js"), ReactMount = require("react/lib/ReactMount"), React = require("react"); module.makeHot = module.hot.data ? module.hot.data.makeHot : ReactHotAPI(function() { return RootInstanceProvider.getRootInstances(ReactMount); }, React); })(); } try { (function() { 
| 
| import React from 'react'; 
| import Router from 'react-router'; 
| import { DefaultRoute, Link, Route, RouteHandler } from 'react-router'; 
@ multi main 

Answer 1

Sie definieren den Loader für .js Dateien zweimal in Ihrer Webpack-Konfiguration.

versuchen

module.exports = { 
    entry: [ 
     'webpack/hot/only-dev-server', 
     "./js/app.js" 
    ], 
    output: { 
     path: __dirname + '/build', 
     filename: "bundle.js" 
    }, 
    module: { 
     loaders: [ 
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}, 
      { test: /\.css$/, loader: "style!css" } 
     ] 
    }, 
    plugins: [ 
     new webpack.NoErrorsPlugin() 
    ] 

}; 

statt. Je nachdem, welche Versionen von Babel Sie verwenden, müssen Sie möglicherweise auch in presets suchen. Wenn dies nicht funktioniert oder Sie nicht Zeit für die Einrichtung des Webpacks aufwenden und nur eine schnelle Reaktionsumgebung erstellen möchten, empfehle ich die Verwendung von http://www.overreact.io/, um eine grundlegende react/webpack-Umgebung einzurichten und von dort aus zu gehen.