react.jsアプリケーションでreact-toolboxコンポーネントを使用できません

Question

私のアプリケーションの背景 - ASP 5（ 'vNext'、MVC 6）です。このプロジェクトでは、gulpを統合してVisual Studio 2015を使用して、クライアントスクリプトをブラウザで再生成し、browserifyとgulpを使用して再作成しています。 STMTSを必要と

は、だから私は次のように、「.jsxの」ソースファイルを持っている：

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

...と私はbrowserifyを通してそれを実行し、期待通りにすべてが解決されます。私はそれが解決していることを知っている私は何かのstmtsを無効に私はVSのタスクランナーコンソールでbrowserifyエラーを参照してくださいに変更するため。私はページからすべてを取り除き、バンドルされたアプリケーションへの参照を持つスクリプトタグを持っています。

これで、すべてのソースがOKであることがわかります。私のバンドルされたスクリプトを参照する死んでシンプルなhtmlページを実行した場合、 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'はその時点でスクリプトが利用できる完全にインスタンス化された通常のオブジェクトです。私はそれを調べて、そのプロトタイプが 'ReactComponent'であり、それが{render、isMountedなど}に期待する方法を持っていることを確認することができます。

だから、全くnullではありません。私は実行時にすべてが正しいかのように見えるときにスローされるエラーを理解できません。もちろん、私がブラウジングやバンドルの仕方に関係するかもしれませんが、これは私には全く新しいものなので、何を試してもわからないのです。

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

...と、ここで適切な一気の仕事です：：

はここに束ねる前に私の全体のJSXのsrouceだ

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モジュールをサポートしています。

は、その前提条件のドキュメントを参照してください。私はここで間違っているかもしれませんが、私はウェブパックの男ですので、私はこれを刺すようにしています。ここで

はBrowserifyのためのCSSモジュールのプラグインです： https://github.com/css-modules/css-modulesify