ReactDom在使用React和Webpack时未定义

Question

我遵循了这个简单的教程（http://jslog.com/2014/10/02/react-with-webpack-part-1/）开始使用React和webpack，但是在尝试使用更更新的语法时遇到了问题。例如，使用ReactDom调用render而不是已弃用的'React.renderComponent'。

我运行了：

npm install --save react-dom

并添加了

var ReactDom = require('react-dom')

将代码添加到index.jsx文件中

'react-dom': 'ReactDom'

在webpack.config.js中的“externals”列表中添加。 （我不确定这是否必要。）

但是，我遇到了JavaScript错误，“ReactDom未定义”。

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']
}
}

- mikejw

---

Mike，请尝试选择一个问题标题，该标题可以描述您的问题，并且可以通过Google或Bing被其他遇到类似问题的人找到。 - jantimon

一切看起来都很好。应该可以工作。你不需要外部文件。请问您能否添加您的webpack配置？ - jantimon

Answer 1

如果这是您代码的精确副本，那么我认为您引用 ReactDOM 的方式不正确——DOM 中的所有字母都需要大写，如下所示：

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

在你的 webpack.config.js 中的 externals 配置中：

'react-dom': 'ReactDOM'

请注意，在设置外部依赖项时，Webpack希望您单独加载这些库。例如，通过在HTML（index.html）中放置指向React和ReactDOM的CDN或这两个库的内部副本的脚本标记。因此，这也可能是您遇到问题的原因。

如果要使用与node模块一起提供的React和ReactDOM版本，请省略Webpack的外部设置。它将使用您自己的脚本捆绑React和ReactDOM（使bundle.js更长），但它会正常工作。据我所知，还有其他几种处理方式（例如使用Express从您的节点模块中公开相关文件），但似乎许多人只是将它们捆绑在一起。

- Sia

---

谢谢，我会研究一下！ - mikejw

我添加了一些关于外部变量的信息，以防你的问题出在那里。 - Sia

这个也可以工作："react-dom": 'React.__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED', - starcorn