嵌入式反应组件未在 html 页面中呈现/加载。（网络包/通天塔）答案

【问题标题】：Embedded react component not rendered/loaded in html page. (webpack/babel)嵌入式反应组件未在 html 页面中呈现/加载。（网络包/通天塔）
【发布时间】：2018-01-08 21:25:04
【问题描述】：

我正在尝试设置我的第一个 Webpack Babel React 项目。尽管 html 代码显示在各种浏览器上 (http://localhost:80)，但未加载嵌入式反应组件。可以在控制台中读取以下消息 “未捕获的错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。在不变量 (transformed.js:304)" Click here to see error image

在下面找到设置此环境的不同配置和代码文件。

./app/index.html

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My first local App</title>
</head>

<body>
  <div id='app'> </div>
  <h1> Testing </h1>
</body>
</html>

./app/index.js

 var React = require('react');
 var ReactDOM = require('react-dom');
 var App = require('../components/App');

ReactDOM.render(
<App />,
document.getElementById('app')
);

./components/App.js

import React from 'react';
import ReactDOM from 'react-dom';

export class App extends React.Component {
    constructor(){
        super();
        console.log('Component has been constructed ')
    }
  render() {
     return (
      <div>
           <h1>This is a simple test</h1>
      </div>
    );
  }
}

ReactDOM.render(
  <App />, 
  document.getElementById('app')
);

package.json

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "deploy":"npm run build && npm run git-commit && npm run git-push",
    "build": "webpack",
    "start": "webpack-dev-server"   
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^2.30.1",
    "webpack": "^3.4.1",
    "webpack-dev-server": "^2.6.1"
  }
}

.babelrc

{presets:["react"]}

webpack.config

var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin ({  
                                                        template: __dirname + '/app/index.html',
                                                        filename: 'index.html',
                                                        inject: 'body'
                                                    });
module.exports = {  
                    entry:  __dirname + '/app/index.js' , 
                    module: {loaders: [ {test:/\.js$/, exclude:/node_modules/, loader:'babel-loader' } ]},
                    output: {filename: 'transformed.js', path: __dirname + '/build'},
                    plugins: [HTMLWebpackPluginConfig],
                    resolve : { extensions: [".js", ".jsx"] }
                };

谢谢，

塞巴斯蒂安

【问题讨论】：

标签： javascript html reactjs webpack babeljs

【解决方案1】：

首先，删除<App /> 中的第二个渲染，然后将var App = require('../components/App'); 更改为import {App} from '../components/App';，您的错误必须消失。

【讨论】：

感谢您的回答安德鲁。您的解决方案也以非常干净的方式解决了问题。
@Sebastian，很高兴为您提供帮助 :)

【解决方案2】：

看起来你有

ReactDOM.render(
  <App />, 
  document.getElementById('app')
);

在那里两次。也可能是其他错误，但将其从 App.js 中删除，看看是否有帮助。

【讨论】：

谢谢，你完全正确。我刚刚删除了 ./app/index.js 实例，它可以工作。
@Bruce 太棒了！如果它解决了您的问题，请记住接受答案，而不仅仅是投票。