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错误确保您拥有最新版本的node.js和npm 安装。

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

npm install -g npm

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

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

Material-ui示例代码未编译

1 个答案: