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開發服務器上不渲染

回答

相關問題