2016-01-10 3 views
0

Код:React.createElement ошибка с React маршрутизатором

import React from 'react' 
import { render } from 'react-dom' 
import { Router} from 'react-router' 
render((
    <Router> 
    </Router> 
), document.getElementById('app')) 

дает ошибку:

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

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 

Я использую Browserify с Babel6 - вот babelrc:

{ 
    "presets": ["es2015", "react"], 
    "env": { 
    "development": { 
     "plugins": [ 
     ["react-transform", { 
      "transforms": [{ 
      "transform": "livereactload/babel-transform", 
      "imports": ["react"] 
      }] 
     }] 
     ] 
    } 
    } 
} 

и пакет. json deps:

"axios": "^0.8.1", 
"babel-core": "^6.3.26", 
"babel-loader": "^6.2.0", 
"babel-plugin-react-transform": "^2.0.0-beta1", 
"babel-plugin-transform-es2015-arrow-functions": "^6.3.13", 
"babel-plugin-transform-react-jsx": "^6.3.13", 
"babel-plugin-transform-runtime": "^6.3.13", 
"babel-polyfill": "^6.3.14", 
"babel-preset-es2015": "^6.3.13", 
"babel-preset-react": "^6.3.13", 
"babel-preset-stage-0": "^6.3.13", 
"babel-preset-stage-2": "^6.3.13", 
"babel-runtime": "^6.3.19", 
"babelify": "^7.2.0", 
"browserify": "^12.0.1", 
"livereactload": "^2.1.0", 
"react": "^0.14.5", 
"react-addons-linked-state-mixin": "^0.14.5", 
"react-dom": "^0.14.3", 
"react-hot-loader": "^1.3.0", 
"react-mixin": "^1.1.0", 
"react-proxy": "^1.1.2", 
"react-redux": "^4.0.6", 
"react-router": "^1.0.3", 
"react-simple-router": "^0.1.6", 
"reactify": "^1.1.1", 
"redux": "^3.0.5", 
"redux-devtools": "^3.0.1", 
"redux-devtools-dock-monitor": "^1.0.1", 
"redux-devtools-log-monitor": "^1.0.1", 
"redux-form": "^4.0.7", 
"redux-simple-router": "^1.0.2", 

Browserify конфигурации:

var props = { 
entries: [script], 
cache: {}, 
packageCache: {}, 
plugin: isProd ? [] : (watch ? [watchify, livereactload] : [livereactload]), 
transform: [ 
    ['babelify', { 
    presets: ['es2015', 'react'], 
    plugins: [ 
     ['react-transform', { 
     'transforms': [{ 
      'transform': 'livereactload/babel-transform', 
      'imports': ['react'] 
     }] 
     }] 

    ] 
    }], 
    [envify, {}] 
], 
extensions: ['.jsx', '.js'], 
debug: !isProd, 
fullPaths: !isProd // for watchify 
} 

Предложение? Я нахожу множество вопросов о GH с этим, но без четкого решения. Это делается сразу же на примерах на сайте React Router, поэтому не уверен, почему я не могу заставить его работать. Единственный diff - они используют webpack.

+0

Какую версию я должен использовать? Это 1.0.3 прямо из npm сегодня – cyberwombat

+0

В качестве примечания, если у вас есть '.babelrc', вам, вероятно, не нужно реплицировать его внутри конфигурации браузера. –

+0

@ FélixSaparelli ах да - даже не понял. Я прошел через кошмар в webpack и сдался, так что это мой рабочий, но неочищенный конфиг :) – cyberwombat

ответ

0

Ну, проблема была нечетной - благодаря комментарию я смог ее решить. У меня есть конфигурация .babelrc, а также задание galp browserify с его собственной конфигурацией babel. По какой-то причине возникли проблемы. Я удалил один в глотке, и теперь все работает нормально. Причина: у меня нулевая идея.

Смежные вопросы