ReactJS: React.render is not a function and React.createElement is not a function

Question

First of all, since React v0.14, there is this new package called react-dom. It abstracts the "environment" that you will run React, and, in your case, is the browser.

https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#two-packages-react-and-react-dom

So, since you have now two packages: "react" to create your React components and "react-dom" to "integrate" React with the browser, you need to call the correct methods that each one of them provides.

Then, answering your questions:

Why the react-dom created the problem with React.createElement?

The package that has React.createElement is react and not react-dom.

Is it because of this new version of React?

Yes, you are not able to call React.render (from package react) anymore, you need to use ReactDOM.render (from package react-dom).

Is there a better approach to solve these problems without having to invoke react-dom and react?

I don't see it as a "problem", you just need to know that now there is a specific package to manipulate DOM. Also, it is a "good" pattern, because if sometime you want to render your components as an HTML (to render it using a server), you just need to adapt some things and your code will be the same.

I was getting error: "React.createElement is not a function" and for my situation the fix was to change this:

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

TO THIS:

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

This was in a TypeScript file so i'm not sure it applies to non-TypeScript or not.