React在Webpack开发服务器上不渲染

我已经工作了，记不起我改变了什么，现在页面加载了，但是没有反应被渲染到屏幕上。不知道错误在哪里。当我运行没有出现错误的WebPack -m其次NPM开始React在Webpack开发服务器上不渲染

WebApp文件夹是这样的...

{}应用 - App.js
{}公众 - 束.js文件 - index.html的
webpack.config.js
.babelrc
的package.json

这里有重要的文件

的WebPack

module.exports = { 
    entry: './app/App.js', 
    output: { 
    path: './public', 
    filename: 'bundle.js', 
    }, 
    devServer: { 
     inline:true, 
     contentBase: './public', 
     port: 3333 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel' 
     } 
    ] 
    } 
}

的package.json

{ 
    "name": "newaccount", 
    "version": "1.0.0", 
    "description": "a form submission for new accounts", 
    "main": "App.js", 
    "scripts": { 
    "start": "webpack-dev-server" 
    }, 
    "author": "---", 
    "license": "ISC", 
    "dependencies": { 
    "react": "^15.4.1", 
    "react-dom": "^15.4.1", 
    "react-router": "^3.0.0" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.18.2", 
    "babel-loader": "^6.2.8", 
    "babel-preset-es2015": "^6.18.0", 
    "babel-preset-react": "^6.16.0", 
    "html-webpack-plugin": "^2.24.1", 
    "webpack": "^1.13.3", 
    "webpack-dev-server": "^1.16.2" 
    } 
}

.babelrc

{ 
    "presets": [ 
      "es2015", 
      "react" 
    ] 
}

App.js

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 



class Testing extends Component { 
    render() { 
     return (
      <div> 
       <h3>JUST A TEST</h3> 
      </div> 
     ) 
    } 
} 

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

我曾经试图使组件测试的ES6常量像...

const Testing =() => return <div><h3>JUST A TEST</h3></div>

，但仍无法得到任何显示在本地主机：3333或从我的计算机的完整路径。

感谢所有帮助

来源

2016-12-06 user3622460

浏览器控制台没有错误？ – azium

我能得到你的例子做三件事情来运行。

首先，在webpack.config.js的顶部添加一个HTMLWebpackConfiguration。然后，在/app中添加一个index.html页面。最后，确保配置指向HTML文件。最后webpack.config.js看起来是这样的：

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/App.js', 
    output: { 
    path: __dirname + '/public', 
    filename: 'bundle.js', 
    }, 
    plugins: [HTMLWebpackPluginConfig], 
    devServer: { 
     inline:true, 
     contentBase: './public', 
     port: 3333 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel' 
     } 
    ] 
    } 
}

的app/index.html看起来是这样的：

https://tylermcginnis.com/react-js-tutorial-1-5-utilizing-webpack-and-babel-to-build-a-react-js-app-5f804d729d3b#.f4sslv7ub

Invariant Violation: _registerComponent(...): Target container is not a DOM element

：

信息的

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>My App</title> 
    <link rel="stylesheet" href="styles.css"> 
</head> 
<body> 
    <div id="app"></div> 
</html>

来源210

来源

2016-12-06 02:04:21 Brad

是的，我真的从那个教程中做出了这个例子 - 非常有帮助。我希望找到一种方法让我的本地主机运行没有html-webpack mod。 – user3622460

我认为它唯一可行的方法是如果你有一个HTML文件来“启动”你的包。但是，如果您找到其他解决方案，请将其发布 - 我也想知道！ – Brad

我遇到了同样的问题。您可能需要重新访问此解决方案。

在检查webpack-dev-server文档后，我意识到我需要在webpack config中指定devServer属性集合。你已经在你的例子中做了这个，这是我回复之前的7个月。从他们的文档实例：

devServer: { 
    contentBase: path.join(__dirname, "dist"), 
    compress: true, 
    port: 9000 
}

这解决在index.html的甚至没有（每个浏览器的网络调试列表）加载我的情况。

我不需要在任何地方添加HTMLWebpackConfiguration。

https://webpack.js.org/configuration/dev-server/

来源

2017-06-21 01:21:37

React在Webpack开发服务器上不渲染

回答

相关问题