NPMでの公開のためのReactコンポーネントのインポートモジュール

Question

NPMでの公開のための最初のReactコンポーネントです。私は反応 - ウェブパック - 構成パッケージヨーマンから私のプロジェクトを開始するために使用します。しかし、私はインストールしてアプリを反応させるために、私のコンポーネントをインポートするとき、私はエラーキャッチ：

Failed to compile. 

Error in ./~/kladrapi-react/index.js 
Module not found: [CaseSensitivePathsPlugin] `/develop/myproject/node_modules/kladrapi-react/node_modules/React/react.js` does not match the corresponding path on disk `react`. 

@ ./~/kladrapi-react/index.js 1:82-98 

を私はこのエラーを理解するんだけど、私のコンポーネントにモジュールに反応インポートする方法を正しく理解していません！

Actual version on GitHub

Answer 1

モジュールが見つかりません：[CaseSensitivePathsPlugin] /develop/myproject/node_modules/kladrapi-react/node_modules/React/react.jsディスクreact上の対応するパスと一致していません。 ./~/kladrapi-react/index.js

Answer 2

@

は、私はあなたのコード内に複数の問題があると思います。 index.htmlで

：line-- <script src="kladrapi-react.js"></script>

1. @

   ファイル名は "kladrapi-react.jsx" ない "kladrapi-react.js" です。

2. 2番目の問題では、ここでは "kladrapi-react.js（x）"がルートレベルにあることを期待しています。どちらの場合もそうではありません。あなたのフォルダ構造によると、 "kladrapi-react.js（x）"ファイルは./lib/kladrapi-react.jsxにあります。

これ以外にも、kladrapi-react.js（x）ファイルには、ES5とES6の構文が混在しています。 index.htmlの変数KladrapiReactにアクセスしていますが、あなたは 'KladrapiReact'としてエクスポートしていません。別のコンポーネントに'React.createClass....'コードを入れることをお勧めします。

このWebPACKのプラグインが必要なすべてのモジュールのパス全体が実際の正確なケースが一致強制：あなたは「大文字と小文字を区別-パス-WebPACKの-Plugin」を使用する必要がありますされるエラーのために

ディスク上のパス。

npm install --save-dev case-sensitive-paths-webpack-plugin 

使用方法：このプラグインを読み込むドキュメントhere詳細については

var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); 

var webpackConfig = { 
    plugins: [ 
     new CaseSensitivePathsPlugin() 
     // other plugins ... 
    ] 
    // other webpack config ... 
} 

。