Material-ui Beispielcode nicht kompiliert

Question

Ich bin ein Neuling, um allgemein zu reagieren und zu programmieren, damit ich hier einen schmerzlich offensichtlichen Fehler mache, und ich entschuldige mich, wenn das der Fall ist. Ich baue gerade meine ersten Komponenten in React. Ich bin stark auf Beispielcode von Material-ui angewiesen und habe erfolgreich zwei Grids erstellt, aber als ich versuchte, eine Combo-Box-Komponente zu erstellen, würde sie überhaupt nicht kompilieren. Hier ist das NPM-Debug-Protokoll Ich erhalte:

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 ] 

Und hier ist mein ungeschnitten (der Beispielcode aus Material-ui.com) Komponente:

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

Hier ist meine 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')); 

ich habe auf Syntaxfehler überprüft und vielleicht eines fehlt mir, aber ich keine finden kann. Ich denke, dass dieses ganze Problem wahrscheinlich auf meine Unerfahrenheit zurückzuführen ist, also bin ich unglaublich dankbar für jeden, der Zeit damit verbringt, mir zu helfen. Ich habe das React-Plugin für Atom und es hat keine Syntaxfehler ausgelöst.

Answer 1

Ich habe kein Problem in der Syntax gefunden.

Da der Knoten-Debug-Log sagt

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

Aktualisieren der npm ersten folgenden Befehl.

npm install -g npm 

versuchen dann node_modules Ordner und führen Sie npm install wieder im Projektstammordner zu löschen. Ich hoffe, Sie haben das Material-UI-Paket bereits installiert, wenn nicht, führen Sie npm install material-ui.

Dies wird definitiv Ihr Problem lösen. Versuchen Sie im schlimmsten Fall, ein neues Projekt zu erstellen, nachdem Sie das npm-Paket aktualisiert haben, und führen Sie die obigen Schritte wie gewohnt aus. Weil Projekte, die von einer älteren Version von npm erzeugt werden, zu solchen Fehlern führen können.