ReactJS 渲染错误 Uncaught Invariant Violation: ReactDOM.render()

Question

具有以下 React(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 配置

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 正在生成

我做错了什么？

Answer 1

我遇到了同样的问题，在我的情况下，这是 webpack 配置中的错误。请注意，输出路径必须指定为 绝对路径 (See Webpack Doc here)。所以你的输出路径应该设置成这样：

path.resolve(__dirname, "app"),

用 console.log 仔细检查结果，确保路径正确解析为您希望输出到的绝对路径。

ReactJS 渲染错误 Uncaught Invariant Violation: ReactDOM.render()

ReactJS render error Uncaught Invariant Violation: ReactDOM.render()

reactjs

webpack

webpack-dev-server