_reactDom2.default.render non è una funzione

Question

considerare il seguente codice di reagire

il file main.js è:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Maincontainner from './maincontainner'; 

ReactDOM.render(
    <div> 
     <h1>News</h1> 
     <Maincontainner/> 
    </div>, 
    document.getElementById('content') 
); 

e il componente è:

import React from 'react'; 


export default class Maincontainner extends React.Component{ 

    render() { 
     console.log("I am here"); 
     return (<dev> Salman is here </dev>); 
    } 
} 

il problema è , quando eseguo l'applicazione, affronto il seguente errore nella mia console:

Uncaught TypeError: _reactDom2.default.render is not a function 

e qui è le dipendenze

"dependencies": { 
    "webpack": "^1.12.14", 
    "webpack-dev-server": "^1.14.1", 
    "react" : "^0.14.7", 
    "react-dom" : "^0.14.7", 
    "babel-cli": "^6.5.1", 
    "babel-preset-es2015": "^6.5.0", 
    "babel-loader": "^6.2.1", 
    "babel-preset-react": "^6.3.13", 
    "babelify": "^7.2.0" 


    } 

Aggiornamento: webpack.config.json

module.exports={ 

    entry: './js/main.js', 
    output:{ 

     filename: 'bundle.js' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /.js?$/, 
       loader: 'babel', 
       exclude: /node_modules/, 
       query: { 
        presets: ['es2015', 'react'] 
       } 
      } 
     ] 
    }, 
    devServer:{ 


     port:3000 
    } 





}; 

Ho anche 1 .babelrc il file

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

Answer 1

Aggiornamento reagire e reagiscono-dom a "^15.2.1 "funziona per me. Spero ti possa aiutare.

Answer 2

È possibile modificare qualcosa nel componente Maincontainner.

1. Aggiungilo superiore: import ReactDOM from 'react-dom';
2. Change render a ReactDOM.render

Answer 3

Alcuni dei tutorial che ho usato questa mentalità e sembra funzionare bene.

'use strict'; 

import React, { Component } from 'react'; 
import { render } from 'react-dom'; 

class Pokemon extends Component{ 
    render() { 
     const { pokemon, id } = this.props; 
     return (
      <div className="pokemon--species">..</div> 
     ); 
    } 
} 


render(
    <div className="myDiv">Hello Electron!</div>, 
    document.getElementById('content') 
); 

Spero che questo aiuti ... A volte tutte le dipendenze, transpiling e configurazioni rendono questa roba un po 'opprimente -_-

Answer 4

Nel mio caso, ho scritto {import ReactDOM da 'reagire'}. Ovviamente, avrei dovuto usare 'react-dom'