具有以下反应(15.0.2)示例
组件
import React from 'react';
class Test extends React.Component {
render() {
return <div> Test </div>;
}
}
export default Test;
并尝试渲染
import React from 'react';
import ReactDOM from 'react-dom';
import Test from './components/Test';
ReactDOM.render(<Test/>, document.getElementById('app'));
我确实
bundle.js:707 Uncaught Invariant Violation: ReactDOM.render(): Invalid component element. Instead of passing a string like 'div', pass React.createElement('div') or <div />
。
和webpack config
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './app/index.js',
output: {
path: './app',
filename: 'bundle.js'
},
devServer: {
inline: true,
port: 3333
},
module: {
loaders: [
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: ['babel'],
query: {
presets: ['es2015', 'react']
}
}
]
}
};
package.json安装了依赖项
"dependencies": {
"axios": "^0.11.0",
"babel": "^6.5.2",
"babel-core": "^6.8.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"cors": "^2.7.1",
"css-loader": "^0.23.1",
"express": "^4.13.4",
"html-webpack-plugin": "^2.16.1",
"immutable": "^3.8.1",
"mongoose": "^4.4.15",
"react": "^15.0.2",
"react-dom": "^15.0.2",
"react-hot-loader": "^1.3.0",
"react-redux": "^4.4.5",
"react-router": "^2.4.0",
"redux": "^3.5.2",
"redux-devtools": "^3.2.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.0",
"webpack-dev-middleware": "^1.6.1",
"webpack-dev-server": "^1.14.1",
"webpack-hot-middleware": "^2.10.0"
},
"devDependencies": {
"babel-cli": "^6.8.0",
"babel-core": "^6.8.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"webpack": "^1.13.0",
"webpack-hot-middleware": "^2.10.0"
}
当我做的时候
webpack --display-error-details
生成了bundle.js
我做错了什么?
答案 0 :(得分:0)
我有同样的问题,在我的情况下,这是webpack配置中的错误。请注意,输出路径必须指定为绝对路径(See Webpack Doc here)。 所以你的输出路径应该设置为这样:
Wed Jan 6 22:54:08 2016
使用console.log仔细检查结果,以确保路径已正确解析为输出所需的绝对路径。