Material-uiサンプルコードがコンパイルされていません

Question

私はリアクションとプログラミングの初心者ですので、ここで痛いほど明白な間違いをしているかもしれません。 私は現在、Reactの最初のコンポーネントをビルドしています。私はMaterial-uiのサンプルコードに大きく依存しています.2つのグリッドを作成しましたが、コンボボックスコンポーネントを作成しようとすると、まったくコンパイルされませんでした。ここで私が取得していますNPM-デバッグログです：

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

私は文法上の誤りをチェックしていますが、1つも見つからないかもしれませんが、何も見つかりません。私はこの全体的な問題はおそらく私の経験不足のためだと思うので、私は時間を費やして私を助けてくれる人に信じられないほど感謝しています。私は原子のための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で作成されたプロジェクトは、この種のエラーを引き起こす可能性があるためです。