堆栈内存溢出
  繁体   English   中英

React.createElement: type is invalid - 需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：object

[英]React.createElement: type is invalid — expected a string (for built-in components) or a class/function (for composite components) but got: object

 原文  2020-12-14 20:26:04  4   0    reactjs/ server-side-rendering

问题描述

我正在使用 React 和 Node 构建一个登录应用程序。 我使用 Babel 和 Webpack 进行转译和捆绑。 在 React 端，我在节点端使用 ES6 模块系统和 Commonjs 模块。

该应用程序在客户端运行良好，但是当我打算添加服务器端渲染时，出现上述错误。

在做了一些研究之后，我认为这可能是我的 MainRouter 的导入，模块是使用“export default”导出的，所以我添加了这一行“const MainRouter = require('../client/MainRouter').default”。 添加后，错误消失，但应用程序不显示任何内容。

下面是我的代码：

express.js

 `
// server side rendering module
const React = require("react");
const ReactDOMServer = require("react-dom");
const StaticRouter = require("react-router-dom").StaticRouter;  
const MainRouter = require("../client/MainRouter")
console.log(require("../client/MainRouter"))

const { SheetsRegistry, JssProvider } = require("react-jss");

const {
  MuiThemeProvider,
  createMuiTheme,
} = require("@material-ui/core/styles");
const { indigo, pink } = require("@material-ui/core/colors");
const Template = require("./../template");
app.get("*", (req, res) => {
  const sheetsRegistry = new SheetsRegistry();
  const theme = createMuiTheme({
    palette: {
      primary: {
        light: "#757de8",
        main: "#3f51b5",
        dark: "#002984",
        contrastText: "#fff",
      },
      secondary: {
        light: "#ff79b0",
        main: "#ff4081",
        dark: "#c60055",
        contrastText: "#000",
      },
      openTitle: indigo["400"],
      protectedTitle: pink["400"],
      type: "light",
    },
  });

  const context = {};
  const markup = ReactDOMServer.renderToString(
    <StaticRouter location={req.url} context={context}>
      <JssProvider
        registry={sheetsRegistry}
      >
        <MuiThemeProvider theme={theme}>
          <MainRouter />
        </MuiThemeProvider>
      </JssProvider>
    </StaticRouter>
  );

  

  if (context.url) {
    return res.redirect(303, context.url);
  }
  const css = sheetsRegistry.toString();
  res.status(200).send(Template({ markup, css }));
});
`

模板.js

    module.exports = ({ markup, css}) => {
    return `<!doctype html>
        <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>MERN Skeleton</title>
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
            <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
           
            <style> a { text-decoration: none}</style>
        </head>
        <body style="margin:0">
            <div id="root">${markup}</div>
            <style id="jss-server-side">${css}</style>
            <script type="text/javascript" src="/dist/bundle.js">
            </script>
        </body>
        </html>
    `

}

如果有人能指出我正确的方向，我将不胜感激。 提前致谢。

0 个解决方案

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 React.createElement: 类型无效——需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：对象 React.createElement：类型无效——需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：null React.createElement：类型无效 - 预期是字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义 React.createElement：类型无效 - 需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但未定义 警告：React.createElement：类型无效 - 需要一个字符串（对于内置组件）或一个类/函数（对于复合组件） React.createElement：类型无效 - 需要一个字符串（对于内置组件）或一个类/函数（对于复合组件） 警告：React.createElement：类型无效——需要一个字符串（对于内置组件）或一个类/函数 React.createElement：类型无效-预期为字符串（对于内置组件）或类/函数 React.createElement：type无效 - 期望一个字符串（对于内置组件） 反应：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）但得到：对象
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM