类型错误：_reactDom.default.createElement 不是函数

Question

类型错误：_reactDom.default.createElement 不是函数

Abh*_*eet 1 javascript router reactjs react-router-dom

我是 React 的初学者，遇到了一些问题。我正在使用服务器渲染并使用 Express 作为服务器，并收到错误消息 - TypeError: _reactDom.default.createElement is not a function。我检查了各个网站的解决方案，但找不到任何解决方案。

索引.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'),
);

Run Code Online (Sandbox Code Playgroud)

应用程序.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>
);
}

Run Code Online (Sandbox Code Playgroud)

错误

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)

Run Code Online (Sandbox Code Playgroud)

包.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"
  }
}

Run Code Online (Sandbox Code Playgroud)

主页.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> 
    );
}

Run Code Online (Sandbox Code Playgroud)

服务器.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...'));

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 5

在您的 HomePage.js 中，您已导入

import React from "react-dom";

Run Code Online (Sandbox Code Playgroud)

显然应该从“react”导入。React 文档应该有帮助。所以修复方法是：

import React from "react";

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年前
查看次数：	2411 次
最近记录：	4 年，2 月前