ReactDom is not defined with react and webpack

Viewed 7435

I've followed this straightforward tutorial (http://jslog.com/2014/10/02/react-with-webpack-part-1/) for getting started with React and webpack but run into issues when trying to use more updated syntax. i.e. using ReactDom to call render instead of the deprecated 'React.renderComponent'.

I've run:

npm install --save react-dom

and added

var ReactDom = require('react-dom')

to the index.jsx file and added

'react-dom': 'ReactDom'

to the list of 'externals' in webpack.config.js. (I'm not sure if this was necessary.)

However I am getting the javascript error ReactDom is not defined.

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']
}
}
1 Answers
Related