Errore webpack con risposta

Sto cercando di configurare il webpack in base a questo tutorial e continuo a ottenere lo stesso errore. Sto avendo difficoltà di debug questi 2 messaggi:Errore webpack con risposta

ERROR in ./app.js 
Module parse failed: /path/react/react-webpack-babel/app/app.js Line 1: Unexpected reserved word 
You may need an appropriate loader to handle this file type. 
| import React from "react"; 
| import Greeting from "./greeting"; 
| 

ERROR in ./index.html 
Module parse failed: /path/react/react-webpack-babel/app/index.html Line 1: Unexpected token < 
You may need an appropriate loader to handle this file type. 
| <!DOCTYPE html> 
| <html> 
|

Ecco il mio webpack.configure.js

module.exports = { 
    context: __dirname + '/app', 
    entry: { 
    javascript: "./app.js", 
    html: "./index.html" 
    }, 
    output: { 
    filename: 'app.js', 
    path: __dirname + '/dist' 
    }, 
    loaders: [ 
    { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loaders: ['babel-loader'] 
    }, 
    { 
     test: /\.jsx$/, 
     loaders: ['babel-loader'] 
    }, 
    { 
     test: /\.html$/, 
     loader: "file?name=[name].[ext]" 
    } 
    ] 
}

Ecco l'reagiscono componenti

app/greeting.js

import React from "react/addons"; 

export default React.createClass({ 
    render: function() { 
    return (
     <div className="greeting"> 
     Hello, {this.props.name}! 
     </div> 
    ); 
    }, 
});

app/app.js

import React from "react/addons"; 
import Greeting from "./greeting"; 

React.render(
    <Greeting name="World"/>, 
    document.body 
);

app/index.html

<!DOCTYPE html> 
<html> 

    <head> 
    <meta charset="utf-8"> 
    <title>Webpack + React</title> 
    </head> 

    <body></body> 

    <script src="app.js"></script> 

</html>

Nel caso in cui è utile, ecco il mio package.json con dipendenze

{ 
    "name": "project", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "private": true, 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "Me", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-core": "^5.8.22", 
    "babel-loader": "^5.3.2", 
    "file-loader": "^0.8.4", 
    "webpack": "^1.11.0" 
    }, 
    "dependencies": { 
    "react": "^0.13.3" 
    } 
}

fonte

2015-08-15 Mdd

l'opzione loaders deve essere nidificata in un module opporsi in questo modo:

module.exports = { 
    context: __dirname + '/app', 
    entry: { 
    javascript: "./app.js", 
    html: "./index.html" 
    }, 
    output: { 
    filename: 'app.js', 
    path: __dirname + '/dist' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loaders: ['babel-loader'] 
     }, 
     { 
     test: /\.jsx$/, 
     loaders: ['babel-loader'] 
     }, 
     { 
     test: /\.html$/, 
     loader: "file?name=[name].[ext]" 
     } 
    ] 
    } 
};

Ho anche aggiunto un punto e virgola mancante alla fine;)

fonte

2015-08-16 20:11:53 Almouro

Grazie mille! Ho cercato di capire come la sostituzione del modulo hot funziona con il webpack ma è rimasta bloccata su questa parte. Grazie!!! – Mdd

Ho aggiunto i caricatori nella posizione corretta come da risposta, ha aggiunto anche il semi-colore, sto ancora ricevendo lo stesso errore, sai se potrebbe essere dovuto a un altro motivo? –

@AbhinavSingi hai installato npm i caricatori? per esempio. 'npm installa --save-dev babel-loader file-loader' o semplicemente' npm install' con 'dump.json' di Mdd? – Almouro

Quando mi importava con la sintassi

import Component from './components/component';

stavo ottenendo l'errore del modulo di analisi. Per risolvere il problema, ho dovuto specificare .jsx e ha funzionato

import Component from `./components/component.jsx`.

Non è stato un errore di configurazione a tutti. Sono su Babele 6 con caricatore caldo.

fonte

2016-03-27 04:17:31

Errore webpack con risposta

risposta

Problemi correlati