Question

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

React.createElement：类型无效-预期为字符串

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

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

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

不纠正我的问题。此外，当我在Chrome中打开DevTools时，我看到页面空白，React尚未填充我的root 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

Answer 1

我已通过将我的捆绑软件从Parceljs更改为Webpack解决了原始问题React.createElement: type is invalid -- expected a string，看来与构建工具有关。

此问题已解决，但刷新后，在浏览器中显示了一个新名称，在控制台中显示了Error: Failed to lookup view "index" in views directory "//views"。目前正在研究这个新问题。我认为最好的办法是接受此答案，因为新问题似乎无关紧要。

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

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

1 个答案: