'_reactDom2.default.render is not a function
consider the following react code
the main.js file is:
import React from 'react';
import ReactDOM from 'react-dom';
import Maincontainner from './maincontainner';
ReactDOM.render(
<div>
<h1>News</h1>
<Maincontainner/>
</div>,
document.getElementById('content')
);
and the component is:
import React from 'react';
export default class Maincontainner extends React.Component{
render() {
console.log("I am here");
return (<dev> Salman is here </dev>);
}
}
the problem is, when i run the application, i face with following error in my console:
Uncaught TypeError: _reactDom2.default.render is not a function
and here is the dependencies
"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"
}
Update: 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
}
};
I have also 1 .babelrc file
{
"presets": ["es2015", "react"]
}
Solution 1:[1]
You can change something in your Maincontainner
component.
- Add it top:
import ReactDOM from 'react-dom';
- Change
render
toReactDOM.render
Solution 2:[2]
Initially, I was doing this.
import React from 'react-dom';
import ReactDom from 'react-dom';
And soon I realized what I was doing wrong and updated the above statements as follows.
import React from 'react';
import ReactDom from 'react-dom';
Hope it helps.
Solution 3:[3]
Update react and react-dom to "^15.2.1" works for me. I hope it will help you.
Solution 4:[4]
I solved this error when update react
version. Maybe _reactDom2.default.render is not a function
means because of ReactDOM
doesn't have render
function.
"dependencies": {
"react" : "^0.14.7",
"react-dom" : "^0.14.7"
}
to:
"dependencies": {
"react": "^16.5.2",
"react-dom": "^16.5.2"
}
Solution 5:[5]
Some of the tutorials I used this mentality and it seems to work well.
'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')
);
Hope this helps...Sometimes all of the dependencies, transpiling and configurations make this stuff a little overwhelming -_-
Solution 6:[6]
In my case, I wrote { import ReactDOM from 'react' }. Obviously, I should've used 'react-dom'
Solution 7:[7]
in my case the issue was:
import render from "react-dom";
vs
import { render } from "react-dom";
I had to do it the second way, otherwise I got that error. would be interested to know why because they both seem valid
Solution 8:[8]
Change the importing style to
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(
<div>
<App />
</div>,
document.getElementById('root')
);
Solution 9:[9]
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
I had a problem with the word render, this solution helped me
import React from 'react-dom';
import ReactDom from 'react-dom';
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | sv3k |
Solution 2 | Chris |
Solution 3 | Alan |
Solution 4 | Stephen Rauch |
Solution 5 | afreeland |
Solution 6 | vljs |
Solution 7 | Sonic Soul |
Solution 8 | Harsh Makadia |
Solution 9 | nima |