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'));

我检查了语法错误，也许我遗漏了一个，但我找不到。我认为这整个问题可能是由于我的经验不足，所以我非常感谢任何花时间帮助我的人。我有 atom 的 React 插件，它没有抛出任何语法错误。

Answer 1

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

正如节点调试日志所说，

23 错误请确保您拥有最新版本的 node.js 和 npm 已安装。

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

npm install -g npm

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

这绝对可以解决您的问题。在最坏的情况下，尝试在更新 npm 包后创建新项目并照常执行上述步骤。因为旧版本 npm 创建的项目可能会导致这类错误。