Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Webpack - Uncaught TypeError: (0 , _reactDom2.default) is not a function

Trying to make react work with webpack, but get error in dev tools console "app.js:105 Uncaught TypeError: (0 , _reactDom2.default) is not a function"

File 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']
                }
            }
        ]
    }

};

File 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 Package.json added File 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": "*"
      }

}
like image 918
RaShe Avatar asked Oct 28 '25 04:10

RaShe


1 Answers

Have you tried adding "stage-0" to your presets array for the babel-loader fix it? Also, you'll need to npm install --save-dev babel-preset-stage-0.

You should also use ReactDOM.render, I believe, rather than just ReactDOM.

like image 193
Josh Slate Avatar answered Oct 30 '25 11:10

Josh Slate



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!