组件应用程序未运行
组件应用程序未运行
提问于 2018-08-18 21:39:34
我正在和webpack一起做我的第一个React应用程序。我输入了一些教程中的代码，开发服务器工作，没有显示错误，但在浏览器中只显示一件事是文本"TEST HERE:“。
组件应用程序似乎无法操作。
我的代码如下
index.js：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
TEST HERE:
<div id="root"></div>
</body>
</html>App.js：
import React, { Component } from 'react';
import {hot} from "react-hot-loader";
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default hot(module)(App);如何修复它？我的配置有什么问题？
控制台：
C:\work\First-React-App\first-react-app>npx webpack-dev-server --mode development
i ｢wds｣: Project is running at http://localhost:3000/
i ｢wds｣: webpack output is served from http://localhost:3000/dist/
i ｢wds｣: Content not from webpack is served from C:\work\First-React-App\first-react-app\public\
i ｢wdm｣: Hash: 5852d82b0e01ae152bc3
Version: webpack 4.12.0
Time: 1735ms
Built at: 2018-08-18 15:40:55
Asset Size Chunks Chunk Names
bundle.js 1.17 MiB main [emitted] main
Entrypoint main = bundle.js
[./node_modules/react-dom/index.js] 1.33 KiB {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/url/url.js] 22.8 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:3000] (webpack)-dev-server/client?http://localhost:3000 7.75 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.58 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 77 bytes {main} [built]
[./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {main} [built]
[0] multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/only-dev-server ./src/index.js 52 bytes {main} [built]
[./node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1010 bytes {main} [built]
[./node_modules/webpack/hot/only-dev-server.js] (webpack)/hot/only-dev-server.js 2.54 KiB {main} [built]
[./src/App.js] 2.78 KiB {main} [built]
[./src/index.css] 1.05 KiB {main} [built]
[./src/index.js] 677 bytes {main} [built]
[./src/registerServiceWorker.js] 4.26 KiB {main} [built]
+ 53 hidden modules
i ｢wdm｣: Compiled successfully.回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-18 22:35:41
您的index.html文件中缺少bundle.js，因此您的代码不会显示任何内容。
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
TEST HERE:
<div id="root"></div>
<script src="/bundle.js"></script>
</body>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51909271
复制相关文章
相似问题
腾讯云开发者
