在 ES6 中使用 React Router 渲染 <Router> 未捕获的 TypeError：type.toUpperCase 不是函数答案

【问题标题】：Uncaught TypeError rendering <Router> using React Router in ES6: type.toUpperCase is not a function在 ES6 中使用 React Router 渲染 <Router> 未捕获的 TypeError：type.toUpperCase 不是函数
【发布时间】：2016-01-08 05:37:09
【问题描述】：

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

在调用ReactDOM.render 方法时，我的客户端app.js 出现错误。

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');
            }
    });
});

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

警告：React.createElement：类型不应为 null 或未定义。它应该是一个字符串（对于 DOM 元素）或一个 ReactClass（对于复合组件）。

而实际的错误发生在ReactDefaultInjection模块中autoGenerateWrapperClass函数的第三行。

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

【问题讨论】：

标签： javascript node.js reactjs ecmascript-6 react-router

【解决方案1】：

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

【讨论】：

【解决方案2】：

感谢我在 react-router 存储库中打开的 this issue 的回复，我能够解决问题。出于某种原因，我加载了两个 React 副本，一个在 0.13.3 版本中，另一个在 0.14.0 版本中。似乎是 Browserify 导致了这个问题，因为我可以通过在我的构建过程中添加 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'));
});

添加此内容后，相关问题就消失了。

【讨论】：