Webpack - Uncaught TypeError : (0 , _reactDom2.default) n'est pas une fonction

Question

J'essaie de faire fonctionner react avec webpack, mais j'obtiens une erreur dans la console des outils de développement "app.js:105 Uncaught TypeError : (0 , _reactDom2.default) is not a function".

Fichier webpack.config.js :

    module.exports = {
    entry: [
        __dirname + '/assets/react/pages/app.js'
    ],
    output: {
        path: __dirname + '/public/z_output/',
        filename: 'app.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015']
                }
            }
        ]
    }

};

Fichier app.js :

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

class App extends React.Component {
    render(){
       return(
          <h1>aa</h1>
       )
    }
}

ReactDOM(<App />, document.getElementById('app'));

UPDATE Ajout du fichier package.json Fichier package.json :

{
      "name": "kioe",
      "version": "1.0.0",
      "private": true,
      "scripts": {
        "start": "node ./kioe.js"
      },
      "dependencies": {
        "react": "^15.1.0",
        "react-dom": "^15.1.0",
      },
      "devDependencies": {
        "babel-core": "*",
        "babel-loader": "*",
        "babel-preset-es2015": "*",
        "babel-preset-react": "*",
        "webpack": "*"
      }

}

Answer 1

Avez-vous essayé d'ajouter "stage-0" à votre tableau de presets pour que le babel-loader le répare ? Aussi, vous aurez besoin de npm install --save-dev babel-preset-stage-0.

Vous devriez également utiliser ReactDOM.render, je crois, plutôt que simplement ReactDOM.

Answer 2

Vous pouvez également ajouter "stage-2" à votre tableau de presets pour le babel-loader, vous aurez besoin d'installer la dépendance babel-preset-stage-2 -> npm install --save-dev babel-preset-stage-2 dans le fichier App.js ou index.js

import React from 'react'
import { render } from 'react-dom'

class App extends React.Component {
    render(){
       return(
          <h1>aa</h1>
       )
    }
}
render(<App />, document.getElementById('app'));