Невозможно использовать компонент response-toolbox в моем приложении response.js

Question

Фон моего приложения - это ASP 5 ('vNext', MVC 6). Проект использует Visual Studio 2015 с интегрированным использованием gulp для повторного генерации моих клиентских скриптов с помощью браузера и gulp.

Так у меня есть исходный файл «.jsx» с требуют stmts, как:

var DatePicker = require('react-toolbox/lib/date_picker'); 
var React = require('react'); 
var ReactDOM = require('react-dom'); 

... и я запустить его через browserify и все решается, как и ожидалось. Я знаю, что он решает, потому что, если я изменю любой из требований stmts на что-то недействительное, я вижу ошибку браузера в консоли задач в VS. Я удалил все содержимое страницы и имел только тег скрипта со ссылкой на мое приложение в комплекте.

Таким образом, он находит все источники в порядке. И если я запустил простую html-страницу, которая ссылается на мой связанный скрипт без, любые ссылки на компонент DatePicker загружаются нормально.

Как только я пытаюсь использовать компонент DatePicker, хотя, я получаю среагировать ошибку:

React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of 'Dashboard'.

Однако я установить точку останова в браузере непосредственно перед использованием «DatePicker» компонент и повторная загрузка для проверки состояния, а «DatePicker» - полностью экземплярный, обычный объект, доступный для скрипта в этот момент. Я могу проверить его и увидеть, что его прототип «ReactComponent» и что он имеет методы, которые вы ожидаете от него: {render, isMounted и т. Д.}.

Так что это совсем не пусто. Я не могу понять, что ошибка возникает, когда кажется, что все правильно во время выполнения. Конечно, я боюсь, что это может быть функция того, как я просматриваю и связывание, но это для меня все ново, поэтому я не уверен, что даже попробовать.

Вот вся моя JSX srouce перед тем пакетирования:

var DatePicker = require('react-toolbox/lib/date_picker'); 
var React = require('react'); 
var ReactDOM = require('react-dom'); 


var Dashboard = React.createClass({ 
    render: function() { 
     return (

    <div> 
     <DatePicker /> 
     </div> 

    ); 
    } 
}); 

ReactDOM.render(
    React.createElement(
     Dashboard, {}), 
     document.getElementById ("dashReactRoot") 
    ); 

... и вот уместна глотком задача:

gulp.task('b-fy-dashboard', function() { 
    gulp.src(paths.react + '/Admin/Profile/Dashboard.jsx') 
     .pipe(browserify({ 
      insertGlobals: false, 
      bundleExternal: true, 
      debug: false, 
      transform: [ 
      ['browserify-css'] 
      ] 
     })) 
     .pipe(gulp.dest(paths.webroot + 'js/modules')); 
}); 

... как это, что я не могу получить даже самое основное использование стороннего компонента для работы?!?! Я был на нем часами, пожалуйста, поделитесь своими мыслями или опытом.

Answer 1

Возможно, у вас нет настроенных модулей CSS.

Смотрите их предварительные документы:

React Toolbox uses CSS Modules by default to import stylesheets written in SASS. In case you want to import the components already bundled with CSS, your module bundler should be able to require these SASS modules.

Although we recommend webpack, you are free to use whatever module bundler you want as long as it can compile and require SASS files located in your node_modules. If you are experiencing require errors, make sure your configuration satisfies this requirement.

Я вижу, что у вас есть browserify-css подключен, но это не выглядит, как она поддерживает CSS модули. Возможно, я ошибаюсь, но я парень в веб-упаковке, поэтому я принимаю этот удар.

Вот плагин CSS модули для Browserify: https://github.com/css-modules/css-modulesify