ReactDom ist nicht mit react und webpack definiert

Question

Ich habe dieses einfache Tutorial (http://jslog.com/2014/10/02/react-with-webpack-part-1/) für den Einstieg mit React und Webpack gefolgt, aber Probleme beim Versuch, aktualisierte Syntax zu verwenden. d. h. Verwenden von ReactDom zum Aufrufen von Render anstelle der veralteten "React.renderComponent".

Ich habe laufen:

npm install --save react-dom 

und hinzugefügt

var ReactDom = require('react-dom') 

zur index.jsx Datei und hinzugefügt

'react-dom': 'ReactDom' 

in der Liste der 'Externe' in webpack. config.js. (Ich bin mir nicht sicher, ob das notwendig war.)

Allerdings bekomme ich den Javascript Fehler ReactDom ist nicht definiert.

webpack.config.js:

module.exports = { 
entry: './index.jsx', 
output: { 
    filename: 'bundle.js', //this is the default name, so you can skip it 
    //at this directory our bundle file will be available 
    //make sure port 8090 is used when launching webpack-dev-server 
    publicPath: 'http://localhost:8090/assets' 
}, 
module: { 
    loaders: [ 
     { 
      //tell webpack to use jsx-loader for all *.jsx files 
      test: /\.jsx$/, 
      loader: 'jsx-loader?insertPragma=React.DOM&harmony' 
     } 
    ] 
}, 
externals: { 
    //don't bundle the 'react' npm package with our bundle.js 
    //but get it from a global 'React' variable 
    'react': 'React' 
}, 
resolve: { 
    extensions: ['', '.js', '.jsx'] 
} 
} 

Answer 1

Wenn das eine exakte Kopie des Codes ist, dann denke ich, Sie ReactDOM falsch verwiesen - alle Buchstaben in DOM müssen aktiviert werden, etwa so:

var ReactDOM = require('react-dom'); 

Und in Ihrem webpack.config.js Äußerlichkeiten:

'react-dom': 'ReactDOM' 

Beachten Sie, dass, wenn ext Einstellung ernal, Webpack erwartet, dass Sie diese Bibliotheken separat laden. Zum Beispiel, indem Sie ein Skript-Tag in Ihren HTML-Code (index.html) einfügen, das auf die CDNs verweist, um auf die internen Kopien dieser beiden Bibliotheken zu reagieren und darauf zu reagieren. Das könnte also auch der Grund sein, warum Sie Probleme haben.

Wenn Sie die Version von React und ReactDOM verwenden möchten, die mit Ihren Node-Modulen geliefert wurde, lassen Sie die externe Einstellung für Webpack aus. Es wird React und ReactDOM mit Ihrem eigenen Skript bündeln (das Bundle.js länger machen), aber es wird funktionieren. Von dem, was ich sagen kann, gibt es ein paar andere Möglichkeiten, dies zu handhaben (wie die Verwendung von Express, um die relevanten Dateien von Ihren Node-Modulen verfügbar zu machen), aber es scheint, dass viele Leute sie einfach zusammenbündeln.