Question

我已经按照这个简单的教程（http://jslog.com/2014/10/02/react-with-webpack-part-1/）来开始使用React和webpack，但在尝试使用更新的语法时会遇到问题。即使用ReactDom调用render而不是已弃用的＆＃39; React.renderComponent＆＃39;。

我跑了：

npm install --save react-dom

并添加了

var ReactDom = require('react-dom')

到index.jsx文件并添加

'react-dom': 'ReactDom'

列出＆＃39; externals＆＃39;在webpack.config.js中。（我不确定这是否必要。）

但是我收到了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']
}
}

Answer 1

如果这是您的代码的精确副本，那么我认为您错误地引用了ReactDOM - DOM中的所有字母都需要大写，如下所示：

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

在你的webpack.config.js外部：

'react-dom': 'ReactDOM'

请注意，在设置外部时，Webpack希望您单独加载这些库。例如，通过在HTML（index.html）中放置一个脚本标记，指向CDN的响应和反应，或者对这两个库的内部副本进行反应。所以，这也可能是你遇到问题的原因。

如果要使用节点模块附带的React和ReactDOM版本，请忽略Webpack的外部设置。它会将React和ReactDOM与您自己的脚本捆绑在一起（使bundle.js更长），但它会起作用。据我所知，还有一些其他方法可以解决这个问题（例如使用Express来显示节点模块中的相关文件），但似乎很多人只是将它们捆绑在一起。

ReactDom没有使用react和webpack定义

1 个答案: