基本的“hello world”反应应用程序引发错误

在使用ReactJS框架/库之后，我在遵循this教程的基础上在windows平台上创建了一个基本的“Hello World”反应应用程序，但是当我使用C:\Users\username\Desktop\reactApp>npm start命令运行它时会引发错误CMD。请说明是什么问题？基本的“hello world”反应应用程序引发错误

错误：

> [email protected] start C:\Users\username\Desktop\reactApp 
> webpack-dev-server --hot 

'webpack-dev-server' is not recognized as an internal or external command, 
operable program or batch file. 

npm ERR! Windows_NT 6.3.9600 
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\ 
node_modules\\npm\\bin\\npm-cli.js" "start" 
npm ERR! node v6.11.2 
npm ERR! npm v3.10.10 
npm ERR! code ELIFECYCLE 
npm ERR! [email protected] start: `webpack-dev-server --hot` 
npm ERR! Exit status 1 
npm ERR! 
npm ERR! Failed at the [email protected] start script 'webpack-dev-server --hot'. 
npm ERR! Make sure you have the latest version of node.js and npm installed. 
npm ERR! If you do, this is most likely a problem with the reactApp package, 
npm ERR! not with npm itself. 
npm ERR! Tell the author that this fails on your system: 
npm ERR!  webpack-dev-server --hot 
npm ERR! You can get information on how to open an issue for this project with: 
npm ERR!  npm bugs reactApp 
npm ERR! Or if that isn't available, you can get their info via: 
npm ERR!  npm owner ls reactApp 
npm ERR! There is likely additional logging output above. 

npm ERR! Please include the following file with any support request: 
npm ERR!  C:\Users\username\Desktop\reactApp\npm-debug.log

的index.html文件

<!DOCTYPE html> 
<html lang = "en"> 

    <head> 
     <meta charset = "UTF-8"> 
     <title>React App</title> 
    </head> 

    <body> 
     <div id = "app"></div> 
     <script src = "index.js"></script> 
    </body> 

</html>

main.js文件

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App.jsx'; 

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

App.jsx文件

import React from 'react'; 

class App extends React.Component { 
    render() { 
     return (
     <div> 
      Hello World!!! 
     </div> 
    ); 
    } 
} 

export default App;

的package.json文件

{ 
    "name": "reactApp", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "start": "webpack-dev-server --hot" 
    }, 
    "keywords": [], 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "react": "^15.6.1", 
    "react-dom": "^15.6.1" 
    } 
}

webpack.config.js文件

var config = { 
    entry: './main.js', 

    output: { 
     path:'./', 
     filename: 'index.js', 
    }, 

    devServer: { 
     inline: true, 
     port: 8080 
    }, 

    module: { 
     loaders: [ 
     { 
      test: /\.jsx?$/, 
      exclude: /node_modules/, 
      loader: 'babel', 

      query: { 
       presets: ['es2015', 'react'] 
      } 
     } 
     ] 
    } 
} 

module.exports = config;

来源

2017-08-21 Raees Khan

你运行过'npm install webpack --save'和'npm install webpack-dev-server --save'吗？ –

[检查此]（https://stackoverflow.com/q/35810172/3551786） – Durga

是的！ @FiriceNguyen –

理想情况下，应该已经安装了这个模块webpack-dev-server本身，因为它在中被称为生产依赖项默认。但可能是您的npm模块跳过了它，或者没有正确安装。您可以手动删除node_modules文件夹，并再次执行npm install，它应该可以正常工作。

来源

2017-08-21 09:43:25

基本的“hello world”反应应用程序引发错误

回答

相关问题