Ошибка типа: element.type.toLowerCase не является функцией

Question

Я столкнулся с проблемой при настройке SSR для реагирующего приложения. Код на стороне сервера для рендеринга приведен ниже:

    app.use((req, res) => {
    const context = {}

    const body = ReactDOMServer.renderToString(
        React.createElement(
            Provider, { store },
            React.createElement(
                StaticRouter, { location: req.url, context: context },
                React.createElement(Layout, null, React.createElement(Routes))
            )
        )
    )
    if (context.url) {
        res.redirect(context.url)
    } else {
        res.status(200).send(template({ body }))
    }
})

Конфигурация маршрута следующая: Routes.js

const Routes = () => {
  return (
    <Switch>
      <Route path="/" exact component={Home}/>
      <Route path="*" component={NotFound}/>
    </Switch>
  )
}

    export default Routes

App.js

const App = () => {  
    return (
      <Provider store={store}>
        <BrowserRouter>
        <Layout>
              {router}
        </Layout>
        </BrowserRouter>
    </Provider>
    );
}

export default App

Выкидывает ошибку ниже:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
TypeError: element.type.toLowerCase is not a function
    at ReactDOMServerRenderer.renderDOM (../node_modules/react-dom/cjs/react-dom-server.node.development.js:2304:28)
    at ReactDOMServerRenderer.render (../node_modules/react-dom/cjs/react-dom-server.node.development.js:2298:21)
    at ReactDOMServerRenderer.read (../node_modules/react-dom/cjs/react-dom-server.node.development.js:2234:19)
    at Object.renderToString (../node_modules/react-dom/cjs/react-dom-server.node.development.js:2501:25)
    at app.use (../server.js:59:33)

Когда я попробовал распечатать console.log(React.createElement(Routes)); это показывает, как показано ниже:

{ '$$typeof': Symbol(react.element),
  type: [Function: Routes],
  key: null,
  ref: null,
  props: {},
  _owner: null,
  _store: {} }

Я создал файл CompiledRoutes из файла Routes, используя babel, и импортирую его в server.js, как показано ниже:

const Routes = require('./client/CRoutes').default

Может кто-нибудь PLS направить меня, что может быть проблема здесь? Спасибо заранее.

Answer 1

Попробуйте изменить

React.createElement(Layout, null, React.createElement(Routes))

в

React.createElement(Layout, null, React.createElement(Routes.default))

Вы можете использовать require на стороне сервера, вместо import, что приводит к некоторым расхождениям.