Webpack funktioniert nicht, wenn React eingeführt wird

Ich habe das Haupt-Tutorial auf Webpack verfolgt und ich habe den Server in Betrieb genommen. Wenn ich Dateien ändere, wird es beim Speichern aktualisiert, alles ist gut. Allerdings habe ich dann React eingeführt und alles ging schief.Webpack funktioniert nicht, wenn React eingeführt wird

Erstens, erhalte ich diesen Fehler im Browser:

Unexpected token < 
You may need an appropriate loader to handle this file type.

Dies zeigt die Linie 4 in meiner entry.js Datei:

var CommentBox = React.createClass({ 
    render: function() { 
    return (
     <div className="commentBox"> 
      Hello, world! I am a CommentBox. 
     </div> 
    ); 
    } 
}); 
ReactDOM.render(
    <CommentBox />, 
    document.getElementById('content') 
);

Dies ist index.html

<html> 
<head> 
    <meta charset="utf-8"> 
</head> 
<body> 

    <div id ="content"></div> 
<script type="text/javascript" src="bundle.js" charset="utf-8"></script> 
</body> 
</html>

webpack.config.js:

module.exports = { 
    entry: "./entry.js", 
    output: { 
    path: __dirname, 
    filename: "bundle.js" 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     loader: 'jsx-loader?insertPragma=React.DOM&harmony' 
     } 
    ] 
    }, 
    externals: { 
    'react': 'React' 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    } 
};

Wenn ich die entry.js Datei ändern enthalten nur:

document.write(require("./content.js"));

Es produziert, was ich habe zur Zeit in der content.js Datei:

module.exports = "this is working";

So also ist es etwas zu tun mit reagieren/jsx etc. Hat jemand irgendwelche Lösungen dafür? Ich habe andere Leute online mit dieser Ausgabe gesehen, aber die Lösungen, die ich gegeben habe, haben für mich bisher nicht funktioniert.

Quelle

2015-11-23 The Hurricane

Welche Version von react und babel verwenden Sie? Beide hatten Änderungen, die die meisten alten Tutorials unterbrechen. Bitte verlinke auf das Tutorial. – Yannick

Sie möchten wahrscheinlich babel-loader anstelle von jsx-loader https://github.com/babel/babel-loader – wgcrouch

Webpack und jsx-loader

webpack.config.js

module.exports = { 
    entry: './app.js', 
    output: { 
    path: __dirname, 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [{ 
     test: /\.js/, 
     loader: 'jsx-loader' 
    }] 
    } 
}

app.js

var React = require('react'); 

var App = React.createClass({ 
    render: function() { 
    return <h1>Hello World</h1> 
    } 
}) 

React.render(<App/>, document.getElementById('app'))

und einfach index.html Datei mit einem <div>

Mögliche Sie reagieren mit einer ES6 Syntax (React webpack und babel) verwenden möchten so: Ich hoffe, my post für Sie von Nutzen sein wird.

Update:

Als FakeRainBrigandjsx-loader sagte depricated ist, wäre es gut, wenn Sie werde versuchen, einen babel-loader jsx-loader

Dank statt

Quelle

2015-11-23 13:00:29

jsx-loader ist veraltet – FakeRainBrigand

@FakeRainBrigand Ich habe nicht davon gehört, möglich, weil ich es nicht verwendet habe . Ich habe gerade versucht, eine Frage zu beantworten. Trotzdem danke. Ich werde meine Antwort aktualisieren –

Wie zu verwenden FakeRainBrigand sagte jsx-loader ist veraltet, wenn Sie Es6 oder Jsx konvertieren möchten, werden Sie wahrscheinlichverwenden möchten 210.Und da Babel 6 veröffentlicht wurde jetzt müssen Sie explizit angeben, welche Transformation, indem Sie "Voreinstellungen" in einer .babelrc Datei wie folgt auszuführen:

$ npm install --save-dev babel-loader

$ npm install --save-dev babel-preset-es2015

$ npm install --save-dev babel-preset-react

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

webpack.config.js

module: { 
    loaders: [ 
     { test: /\.css$/, loader: "style!css" }, 
     { 
      test: /\.js$/, 
      loader: 'babel-loader', 
      exclude: /node_modules/, 
      query: { 
       presets: ['es2015'] 
      } 
     }, 
     { 
      test: /\.jsx$/, 
      loader: 'babel-loader', 
      exclude: /node_modules/, 
      query: { 
       presets: ['react'] 
      } 
     },    
    ] 
},

Quelle

2015-11-24 12:36:06

Webpack funktioniert nicht, wenn React eingeführt wird

Antwort

Verwandte Themen