Reagieren Client Seite Rendering Fehler kann nicht erhalten/

Ich versuche zu lernen, reagieren und ich komme zu einigen Problemen beim Client-Side-Routing versuchen. Bitte lassen Sie mich wissen, wenn Sie den Fehler, den ich in meinen Dateien, die ich listed.The Fehler haben sehen halten auf der Browser-Seite bekommenReagieren Client Seite Rendering Fehler kann nicht erhalten/

ist nicht bekommen kann/

Der Fehler, den ich in meiner Konsole sehen ist:

live.bundle.js: 14 GET http://localhost:8080/ 404 (nicht gefunden)

Hier sind meine Dateien:

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', 'babel-loader'], exclude: /node_modules/ }, 
     // { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }, 
     { test: /\.css$/, loader: "style!css" } 
    ] 
    }, 
    devServer: { 
    contentBase: "./src/www", 
    noInfo: true, 
    hot: true, 
    inline: true 
    }, 
    plugins: [ 
    new webpack.NoErrorsPlugin() 
    ] 
};

.babelrc

{ 
    "presets": ["es2015", "react"] 
}

index.html

<!doctype html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>New React App</title> 
    </head> 
    <body> 
    <section id="react"></section> 
    <script src="/build/bundle.js"></script> 
    </body> 
</html>

/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'; 

class App extends React.Component{ 
    render() { 
    return(
     <div className="nav"> 

     <Link to="app">Home</Link> 
     <Link to="login">Login</Link> 

     {/* Important Part */} 
     <RouteHandler/> 

     </div> 
    ); 
    } 
} 

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

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

/js/components/Login.js

import React from 'react'; 
class Login extends React.Component{ 
    render() { 
    return(
     <div>Welcome to login</div> 
    ); 
    } 
} 

export default Login;

Ich schätze die Hilfe.

Hier ist meine webpack.config.js Datei aktualisiert nach @Frederick Mfinanga

var webpack = require('webpack'); 
module.exports = { 
    entry: [ 
    'webpack/hot/only-dev-server', 
    './js/app.js', 
    'webpack-dev-server/client?localhost:8080' 
    ], 
    output: { 
    path: __dirname + '/build', 
    filename: "bundle.js" 
    }, 
    module: { 
    loaders: [ 
     { test: /\.js?$/, loaders: ['react-hot', 'babel', 'babel-loader'], exclude: /node_modules/ }, 
     // { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }, 
     { test: /\.css$/, loader: "style!css" } 
    ] 
    }, 
    devServer: { 
    // contentBase: "./src/www", 
    noInfo: true, 
    hot: true, 
    inline: true 
    }, 
    plugins: [ 
    new webpack.NoErrorsPlugin(), 
    new webpack.HotModuleReplacementPlugin() 
    ] 
};

Quelle

2016-03-31 Joseph Sun

Haben Sie überprüft, ob Ihre App die Ausgabedatei 'bundle.js' erstellt? Wenn nicht, dann ist das der Grund. Es kann einfach nicht diese spezifische Datei finden und weil Sie es in 'index.html' Datei importieren, ist das Problem in Ihrem Code. Stellen Sie daher sicher, dass die Datei 'bundle.js' erstellt wurde. –

Hallo Amir, meine App erstellt die Datei bundle.js in einem Ordner namens build. –

entfernen

contentBase: "./src/www",

von Ihrem devserver Config. Dies wird standardmäßig die Dateien in Ihrem aktuellen Verzeichnis dienen. was ich glaube ist was du suchst und wo dein index.html lebt? richtig?

Quelle

2016-03-31 06:36:58

Hallo Frederick, ich habe diesen Teil hinzugefügt, denn wenn ich ihn herausnehme, erhalte ich den Fehler "Uncaught Error: [HMR] Hot Module Replacement ist deaktiviert". Schlägst du immer noch, ich mache das? Wenn ja, wie kann ich den Fehler beheben, den ich gerade aufgelistet habe? Außerdem möchte ich meine index.html-Datei bereitstellen und ist dort, wo meine index.html lebt. –

ja immer noch tun und fügen Sie diese Zeile zu Ihrem Eintrag Array. 'webpack-dev-server/client? Http: // localhost: 8080', Ändern Sie den Port entsprechend und fügen Sie dies Ihrem Plugins-Array neu Webpack.HotModuleReplacementPlugin() –

Ich folgte Ihrem Vorschlag. Die URL in meinem Browser ist "localhost: 8080/webpack-dev-server/#" ;. Ich bekomme immer noch den Fehler "Uncaught Error: [HMR] Hot Module Replacement ist deaktiviert", ich habe meine Frage aktualisiert, um Ihre Änderungen in der Datei webpack.config.js anzuzeigen. Bitte lassen Sie mich wissen, wenn ich Ihre Anweisungen missverstanden habe. –

Reagieren Client Seite Rendering Fehler kann nicht erhalten/

Antwort

Verwandte Themen