reactjs - Material-ui示例代码未编译

Question

我是React和程序设计的新手，因此我可能在这里犯了一个非常明显的错误，对于这种情况，我深表歉意。
我目前正在用React构建我的第一个组件。我严重依赖Material-ui的示例代码，并且成功构建了两个网格，但是当我尝试构建组合框组件时，它根本无法编译。这是我得到的npm-debug日志:

17 error Windows_NT 10.0.15063
18 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program 
Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
19 error node v6.11.3
20 error npm  v3.10.10
21 error code ELIFECYCLE
22 error metadata-application@1.0.0 start: `node ./node_modules/webpack-dev-
server/bin/webpack-dev-server.js`
22 error Exit status 1
23 error Failed at the metadata-application@1.0.0 start script 'node 
./node_modules/webpack-dev-server/bin/webpack-dev-server.js'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the metadata-
application package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     node ./node_modules/webpack-dev-server/bin/webpack-dev-
server.js
23 error You can get information on how to open an issue for this project 
with:
23 error     npm bugs metadata-application
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls metadata-application
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

这是我未经编辑的(来自Material-ui.com的示例代码)组件:

import React, { Component } from 'react';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';

const styles = {
 customWidth: {
  width: 200,
  },
};

export default class DropDownMenuSimpleExample extends Component {

   constructor(props) {
    super(props);
    this.state = {value: 1};
   }

  handleChange = (event, index, value) => this.setState({value});

  render() {
    return (
      <div>
        <DropDownMenu value={this.state.value} onChange={this.handleChange}>
          <MenuItem value={1} primaryText="Never" />
          <MenuItem value={2} primaryText="Every Night" />
          <MenuItem value={3} primaryText="Weeknights" />
          <MenuItem value={4} primaryText="Weekends" />
          <MenuItem value={5} primaryText="Weekly" />
         </DropDownMenu>
        <br />
        <DropDownMenu
          value={this.state.value}
          onChange={this.handleChange}
          style={styles.customWidth}
          autoWidth={false}
        >
          <MenuItem value={1} primaryText="Custom width" />
          <MenuItem value={2} primaryText="Every Night" />
          <MenuItem value={3} primaryText="Weeknights" />
          <MenuItem value={4} primaryText="Weekends" />
          <MenuItem value={5} primaryText="Weekly" />
         </DropDownMenu>
       </div>
     );
   }
 }

这是我的index.js:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import DropDownMenuSimpleExample from './components/test_combo';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  render() {
    return (
      <div>
        <DropDownMenuSimpleExample />
      </div>
    )
  }
};

ReactDOM.render(<App />, document.querySelector('.container'));

我检查了语法错误，也许我错过了一个，但是找不到。我认为整个问题可能是由于我的经验不足，所以我非常感激任何花时间帮助我的人。我有原子的React插件，它没有引发任何语法错误。

Answer 1

我在语法上没有发现任何问题。

如节点调试日志所述，

23 error Make sure you have the latest version of node.js and npm installed.

首先使用以下命令更新npm。

npm install -g npm

然后尝试删除node_modules文件夹，然后在项目的根文件夹中再次运行npm install。希望您已经安装了material-ui软件包，如果没有，请运行npm install material-ui。

这肯定会解决您的问题。在最坏的情况下，请尝试在更新npm软件包后创建新项目，并照常执行上述步骤。因为由较早版本的npm创建的项目可能会导致此类错误。