在 ES6 中使用 React Router 渲染 <Router> 未捕获的类型错误：type.toUpperCase 不是一个函数

Question

我最近升级到 React v. 0.14.0、ReactDOM v. 0.14.0 和 React Router v. 1.0.0-rc3，但我遇到了以下错误。我已经阅读并尝试了 this and this post 中的解决方案，但我无法让它适用于我使用 ES6 的代码。

错误发生在我的客户端app.js调用ReactDOM.render方法时。

import React from 'react';
import ReactDOM from 'react-dom';
import Router from 'react-router';
import routes from './routes';
import createBrowserHistory from 'history/lib/createBrowserHistory';

let app = document.getElementById('app');
let history = createBrowserHistory();
ReactDOM.render(<Router routes={routes} history={history} />, app);

这是我的routes.js。

import React from 'react';
import {Route, IndexRoute} from 'react-router';
import App from './components/App';
import Home from './components/Home';

export default (
    <Route path="/" component={App}>
        <IndexRoute component={Home} />
    </Route>
);

为了完整起见，这是我的服务器端渲染中间件，它似乎工作正常。

app.use(function(req, res) {
    match(
        { routes, location: req.path },
        (error, redirectLocation, renderProps) => {
            if (error) {
                res.send(500, error.message)
            } else if (redirectLocation) {
                res.redirect(302,
                             redirectLocation.pathname +
                             redirectLocation.search)
            } else if (renderProps) {
                let html = renderToString(<RoutingContext {...renderProps} />);
                let page = swig.renderFile('views/index.html', { html: html });
                res.status(200).send(page);
            } else {
                res.status(404).send('Not found');
            }
    });
});

当我检查客户端日志时，我在错误之前看到以下警告：

Warning: React.createElement: type should not be null or undefined. It should be a string (for DOM elements) or a ReactClass (for composite components).

真正的错误发生在ReactDefaultInjection模块中autoGenerateWrapperClass函数的第三行。

function autoGenerateWrapperClass(type) {
  return ReactClass.createClass({
    tagName: type.toUpperCase(),
    render: function() {
      return new ReactElement(
        type,
        null,
        null,
        null,
        null,
        this.props
      );
    }
  });
}

Answer 1

根据我的经验，这通常发生在我的组件之一实际上是 null 或 undefined 时。

Answer 2

多亏了我的回复，我才 this issue I opened in the react-router repo, I was able to solve the problem. For some reason, I was loading two copies of React, one in version 0.13.3 and another in version 0.14.0. It seems that Browserify was causing this as I was able to resolve this by adding browserify-resolutions 我的构建过程。所以我的 gulp 文件最终包括以下内容（将 .plugin(resolutions, '*') 行添加到两个任务中。

// Compile third-party dependencies separately for faster performance.
gulp.task('browserify-vendor', function() {
    return browserify()
        .require(dependencies)
        .plugin(resolutions, '*')
        .bundle()
        .pipe(source('vendor.bundle.js'))
        .pipe(gulpif(production, streamify(uglify({ mangle: false }))))
        .pipe(gulp.dest('public/js'));
});

// Compile only project files, excluding all third-party dependencies.
gulp.task('browserify', ['browserify-vendor'], function() {
    return browserify('src/app.js')
        .external(dependencies)
        .plugin(resolutions, '*')
        .transform(babelify)
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulpif(production, streamify(uglify({ mangle: false }))))
        .pipe(gulp.dest('public/js'));
});

一旦我添加了这个，问题就消失了。

在 ES6 中使用 React Router 渲染 <Router> 未捕获的类型错误：type.toUpperCase 不是一个函数

Uncaught TypeError rendering <Router> using React Router in ES6: type.toUpperCase is not a function

javascript

node.js

ecmascript-6

reactjs

react-router