未捕獲TypeError呈現<Router>在ES6中使用React Router：type.toUpperCase不是函數

我最近升級到了React v。0.14.0，ReactDOM v。0.14.0和React Router v。1.0.0-rc3，並且I' m掙扎着以下錯誤。我已閱讀並嘗試過this和this後的解決方案，但我無法使用它來使用ES6的代碼。未捕獲TypeError呈現<Router>在ES6中使用React Router：type.toUpperCase不是函數

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

當我檢查客戶端日誌我看到下面的警告錯誤之前：

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

來源

2015-10-10 Juan Carlos Farah

感謝我的迴應我得到了this issue我在反應路由器回購中打開，我能夠解決問題。出於某種原因，我加載了兩份React，一份是0.13.3版本，另一份是0.14.0版本。看起來，Browserify造成了這種情況，因爲我可以通過將browserify-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')); 
});

一旦我加了這一點，在討論的問題就走了。

來源

2015-10-11 09:36:37

在我的經驗，這通常發生在我的組件之一實際上是null或undefined。

來源

2015-10-10 10:23:29

未捕獲TypeError呈現<Router>在ES6中使用React Router：type.toUpperCase不是函數

回答

相關問題