Uncaught TypeError在ES6中使用React Router呈现<Router>：type.toUpperCase不是函数
我最近升级到了React v。0.14.0，ReactDOM v。0.14.0和React Router v。1.0.0-rc3，我正在努力处理以下错误。 我已经阅读并尝试了这个和这篇文章的解决scheme，但我不能让它为我的代码，它使用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：types不应该为null或undefined。 它应该是一个string（对于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 ); } }); }
根据我的经验，这通常发生在我的一个组件实际上是null或undefined 。
感谢我的反应，我得到了这个问题，我在反应路由器回购打开，我能够解决这个问题。 出于某种原因，我加载了两个React版本，一个版本是0.13.3，另一个版本是0.14.0。 似乎是Browserify造成这一点，因为我能够解决这个问题，通过向我的构build过程中添加browserify决议 。 所以我的.plugin(resolutions, '*')文件最终包括以下内容（将.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')); });
一旦我添加了这个问题，问题就消失了。