TypeError: _reactDom.default.createElement is not a function

Question

I'm a beginner in React and stuck with some problem.I'm using server rendering and uses express as server and Getting an error message - TypeError: _reactDom.default.createElement is not a function. I have checked for solutions from various sites couldn't find any solution.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Route from 'react-router-dom';
import {StaticRouter as Router} from 'react-router-dom';
import App from './components/App';

ReactDOM.hydrate(
 <Router><App /></Router> ,
  document.getElementById('mountNode'),
);

App.js

import React, { useState } from 'react';
import {Route,Switch,browserHistory} from "react-router-dom";
import { BrowserRouter as Router } from 'react-router-dom';
import { createMemoryHistory } from 'history';


import HomePage from './HomePage';
import About from './About';
export default function App()
{

const history = createMemoryHistory();
return (
<Router history={browserHistory}> 
     <Switch>
        <Route path="/" exact component={HomePage}/>
        <Route path="/about" component={About}/>  
    </Switch>
</Router>
);
}

Error

TypeError: _reactDom.default.createElement is not a function
at HomePage (C:\LMS-APP\src\components\/HomePage.js:10:17)
at processChild (C:\LMS-APP\node_modules\react-dom\cjs\react-dom-server.node.development.js:3043:14)
at resolve (C:\LMS-APP\node_modules\react-dom\cjs\react-dom-server.node.development.js:2960:5)
at ReactDOMServerRenderer.render (C:\LMS-APP\node_modules\react-dom\cjs\react-dom-server.node.development.js:3435:22)
at ReactDOMServerRenderer.read (C:\LMS-APP\node_modules\react-dom\cjs\react-dom-server.node.development.js:3373:29)
at Object.renderToString (C:\LMS-APP\node_modules\react-dom\cjs\react-dom-server.node.development.js:3988:27)
at C:\LMS-APP\src\server\/server.js:10:40
at Layer.handle [as handle_request] (C:\LMS-APP\node_modules\express\lib\router\layer.js:95:5)
at next (C:\LMS-APP\node_modules\express\lib\router\route.js:137:13)
at Route.dispatch (C:\LMS-APP\node_modules\express\lib\router\route.js:112:3)

package.json

{
  "name": "LMS-APP",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev-server": "nodemon --exec babel-node src/server/server.js --ignore dist/",
    "dev-bundle": "webpack -w -d"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.9.6",
    "@babel/node": "^7.8.7",
    "@babel/preset-env": "^7.9.6",
    "@babel/preset-react": "^7.9.4",
    "babel-loader": "^8.1.0",
    "express": "^4.17.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  },
  "devDependencies": {
    "babel-eslint": "^10.1.0",
    "eslint": "^7.0.0",
    "eslint-plugin-react": "^7.20.0",
    "eslint-plugin-react-hooks": "^4.0.2",
    "nodemon": "^2.0.4"
  }
}

HomePage.js

import React from 'react-dom';
import {Link} from 'react-router-dom';

export default function HomePage()
{
    return(
         <div>
          <nav>
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/about">About</Link>
              </li>
            </ul>
          </nav>
         </div> 
    );
}

server.js

import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from '../components/App';

const server = express();
server.use(express.static('dist'));

server.get('/', (req, res) => {
  const initialMarkup = ReactDOMServer.renderToString(<App />);

  res.send(`
<html>
  <head>
    <title>Sample React App</title>
  </head>
  <body>
    <div id="mountNode">${initialMarkup}</div>
    <script src="/main.js"></script>
  </body>
</html>
  `)
});

server.listen(4242, () => console.log('Server is running...'));

Dharman · Accepted Answer · 2022-03-21 11:03:25Z

5

In your HomePage.js , you have imported

import React from "react-dom";

which should clearly be imported from "react".The React Documentation should help. So the fix is :

import React from "react";

edited Mar 21, 2022 at 11:03

Dharman♦

34k27 gold badges106 silver badges158 bronze badges

answered Mar 21, 2022 at 10:58

Bhargav S

611 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

carlosbf · Accepted Answer · 2020-05-24 17:11:06Z

0

From react-router-dom, the documentation on ssr suggests that StaticRouter is used on the server while BrowserRouter is used in the client.

In your example the file index.js is ran in the client, so my suggestion is to remove the Router tag from this file.

answered May 24, 2020 at 17:11

carlosbf

783 bronze badges

7 Comments

Abhijeet Over a year ago

I have removed the router tag and also tried by adding BrowserRouter as stated above but for both case still getting the same error.

carlosbf Over a year ago

Please make sure you have only one Router tag in your client.

carlosbf Over a year ago

ReactDOMServer.renderToString(<StaticRouter><App /></<StaticRouter>)

carlosbf Over a year ago

And remove the <StaticRouter> from the client

Abhijeet Over a year ago

Getting this Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object - after removing StaticRouter from the client and Add this - <StaticRouter><App /></<StaticRouter> in server. Please find the detailed error below.

|

Collectives™ on Stack Overflow

TypeError: _reactDom.default.createElement is not a function

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related