49

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"]
}
14
  • What react version do you use? Apr 2, 2016 at 17:20
  • "react" : "^0.14.7", "react-dom" : "^0.14.7",
    – Sal-laS
    Apr 2, 2016 at 17:35
  • Using webpack + babel as the transpiler? Apr 2, 2016 at 17:45
  • 2
    A little late here, but does importing just the methods you need help? Example: import { render } from 'react-dom'; Jun 8, 2016 at 16:22
  • 5
    We just got this issue because we mistakenly did import ReactDOM from 'react'; instead of import ReactDOM from 'react-dom'; Oct 25, 2016 at 16:55

11 Answers 11

72

You can change something in your Maincontainner component.

  1. Add it top: import ReactDOM from 'react-dom';
  2. Change render to ReactDOM.render
1
  • Good find. That helped me. You can also import like: import { render } from 'react-dom'; and not have to change the code below.
    – Caqu
    Jul 19, 2018 at 18:26
16

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.

1
  • 2
    for transparency, the DIFFERENCE is the React importing from "react", not "react-dom". In my case I needed to change import ReactDOM to import ReactDom Feb 11, 2019 at 18:07
1

Update react and react-dom to "^15.2.1" works for me. I hope it will help you.

1

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"
}
0

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 -_-

0

In my case, I wrote { import ReactDOM from 'react' }. Obviously, I should've used 'react-dom'

0

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

0

Change the importing style to

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

ReactDOM.render(
  <div>
     <App />
  </div>,
  document.getElementById('root')
);
0

For me the issue was I had this:

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

Changed it to this:

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

For React latest version 18 try this:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);
-1
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';
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.