Importieren von Reaktion mit Webpack Fehler: Modul 'Reagieren' kann nicht aufgelöst werden

Question

Ich erhalte einen Fehler Error: Cannot resolve module 'react' (und re-dom) mit Webpack. Dies muss das schwierigste Projekt-Setup sein, mit dem ich zu tun hatte, und ich bin mir wirklich nicht sicher, warum es nicht funktioniert. Ich habe auch nach ähnlichen Problemen gesucht und kann keine Lösung finden.

webpack.config.js

module.exports = { 
    entry: './static/js/base/base.jsx', 
    output: { 
    path: __dirname + '/static/scripts', 
    filename: 'bundle.js' 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     loader: 'babel', 
     exclude: /node_modules/, 
     query: { 
      cacheDirectory: true, 
      presets: ['react', 'es2015'] 
     } 
     } 
    ] 
    } 
} 

base.jsx

import React from 'react'; 
import ReactDOM from 'react-dom'; 

class Navigation extends React.Component { 
    // ... 
    constructor(props) { 
    super(props); 

    [ 
     // Functions & Event Handlers declaration 
    ].forEach(method => { this[method] = this[method].bind(this); }); 

    this.state = { 
     hello: 'Hello World!', 
    }; 
    } 

    render() { 
    return (
     <div> 
     <div href="#" class="header item"> 
      WINPMP Login 
     </div> 
     <div class="right menu"> 
      <a class="ui primary button item">Students</a> 
      <a class="ui button item">Teachers</a> 
     </div> 
     </div> 
    ); 
    } 
} 

React.render(<Navigation/>, document.getElementById('nav')); 

ich npm install laufen habe, alles, was es. Warum wird es nicht richtig importiert? Wie kann ich das schaffen?

Und mein package.json

"devDependencies": { 
    "babel": "^6.5.2", 
    "babel-core": "^6.11.4", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.9.0", 
    "babel-preset-react": "^6.11.1", 
    "bower": "^1.7.9", 
    "react": "^15.2.1", 
    "react-dom": "^15.2.1", 
    "webpack": "^1.13.1", 
    "webpack-dev-server": "^1.14.1" 
    } 

Answer 1

Versuchen Sie, eine .babelrc Datei in Ihrem Projektstamm zu schaffen, die wie folgt aussieht:

{ 
    presets: [ 
    "es2015", "react" 
    ] 
} 

und ziehen Sie die 'query' Feld von Ihrem webpack Config 'loader'