React.createElement：类型无效——Express/Node.js 和 React-Router答案

【问题标题】：React.createElement: type is invalid -- Express/Node.js and React-RouterReact.createElement：类型无效——Express/Node.js 和 React-Router
【发布时间】：2018-12-25 19:16:02
【问题描述】：

在尝试让 react-router 在我的 Node/Express 后端工作时，React 前端在尝试构建时遇到此警告

React.createElement：类型无效——需要一个字符串

在寻找答案时，我发现了这个已经提出的问题

React.createElement: type is invalid -- expected a string

其中解决方案涉及 * 检查我所有的导出默认类组件... * 从 react-router-dom 与 react-router 导入 BrowserRouter

不要纠正我的问题。此外，当我在 Chrome 中打开 DevTools 时，我看到页面是空白的，React 没有填充我的根 div，最重要的是，控制台出现错误client-bundle.js:1 Uncaught SyntaxError: Unexpected token <

当我点击这个错误时，它会引导我找到我的 client-bundle.js 的源代码，它不包含 javascript，而是样板 html 的标记

我一直在阅读示例、教程和文档，但还没有找到错误的根源。我希望这里的人可能会看到我没有看到的东西

umleto.js

import express from 'express';
import router from './routing/router';

// Basic config
const PORT = 3000;
const HOST = 'localhost';
const app = express();

// Setup server side router
router(app);

// Setup EJS template engine
app.set('views', `${__dirname}/views`);
app.set('view engine', 'ejs');

// Start server
const server = app.listen(PORT, () => console.log(`Listening to ${HOST}:${PORT}`));

路由/router.js

import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router';
import Routes from './Routes';
import NotFoundPage from '../frontend/components/NotFoundPage';

// React Router as middleware
const router = (req, res, next) => {
    const context = { routes: Routes, location: req.url };
    const markup = renderToString( <StaticRouter context={context} /> );
    res.render('index', { markup });
    next();

}
export default (app) => app.use(router);

路由/Routes.jsx

import React from 'react';
import { Route, IndexRoute, Switch } from 'react-router';
import Layout from '../frontend/components/Layout';
import NotFoundPage from '../frontend/components/NotFoundPage';
import IndexPage from '../frontend/components/IndexPage';

// Client Side Routing
const Routes = (
    <Route path="/" component={Layout}>
        <IndexRoute component={IndexPage}/>
        <Route path="*" component={NotFoundPage}/>
    </Route>
);

export default Routes;

我有一个 git hub 存储库设置，以防有人想更好地查看我的问题代码。 https://github.com/slipsnip/UMLeto

【问题讨论】：

乍一看，router.js不应该被命名为router.jsx，因为它里面有JSX标签吗？
我刚刚尝试了这个更改，我还同时更改了一些从 react-router 到 react-router-dom 的引用，并设法删除了警告，尽管错误仍然存在并且那里仍然没有渲染输出。我开始质疑天气 parceljs 是否与此有关，因为我将其用作捆绑程序。

标签： reactjs react-router

【解决方案1】：

我已经通过将我的捆绑器从 Parceljs 更改为 Webpack 解决了最初的问题 React.createElement: type is invalid -- expected a string，它似乎与构建工具相关。

虽然此问题已解决，但在进行刷新后，新问题已在浏览器中显示为 Error: Failed to lookup view "index" in views directory "//views"，在控制台中显示为 Error: Can't set headers after they are sent.。目前正在研究这个新问题。我认为对我来说最好的办法就是接受这个答案，因为新问题似乎无关紧要。

有人可以指导我最好的方法，接受这个答案还是等着看别人怎么说？关于这个新的错误迭代。

【讨论】：