堆棧內存溢出
  簡體   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  3   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