Reactコンポーネントを要求することができません

Question

私はnpmレジストリに個別に格納できるように、現在Monolithic Reactプロジェクトからモジュールを抽出していますが、エクスポートして正しくインポートすることはできません。それらを抽出する前に、私は使用していた：

const Component = require("./component.js"); 

そして、すべてをバンドルするためにwebpackを使用していた。それはうまくいきました。その後、コンポーネントを別のプロジェクトに移動しました。これをwebpackにバンドルしました。しかし、それはnpmの依存関係として動作するようには見えません。ここでは、コンポーネントの基本的なコードがあります：

// Some require statements 
... 
var Component = React.createClass({...}); 
module.exports = Component; 

ビルドプロセスは/ bundle.jsを構築するためのバンドルを出力し、package.jsonは次のようになります。

{ 
    "name": "component", 
    "version": "0.0.2", 
    "description": "...", 
    "main": "build/bundle.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "build-dev": "webpack", 
    "build-min": "NODE_ENV=production webpack && uglifyjs ./build/bundle.js -c -m -o ./build/bundle.min.js --source-map ./build/bundle.min.js.map", 
    "prepublish": "npm run build-min" 
    }, 
    "publishConfig": { 
    "registry": "registry" 
    }, 
    "author": "esaron", 
    "license": "UNLICENSED", 
    "dependencies": { 
    ... 
    }, 
    "devDependencies": { 
    ... 
    } 
} 

そして、私はそれをインポートしています：

const Component = require("component"); 

私はページをロードしようとすると、私はコンソールで次のエラーを参照してください。

bundle.js：1299キャッチインバリアント違反：要素タイプが無効です：文字列（組み込みコンポーネントの場合）またはクラス/関数（複合コンポーネントの場合）がgot：オブジェクトです。レンダリング方法がexportsであることを確認します。

とデバッグの際に、案の定、必要とするコールは私に

コンポーネント=オブジェクト{}

を与えている、私は直接bundle.jsが必要な場合、私は同じ結果を得ますそれをプロジェクトにコピーした後、私は自分のビルドをセットアップして正しい方法で公開する必要がないように感じ、しばらくの間検索した後、私が間違っていることを見つけることができませんでした。

Answer 1

コンポーネントを独自のパッケージに分けるときは、コンポーネントをバンドルしないでください。彼らがES6を使用している場合は、事前公開ステップとしてBabelを使用してトランスバーストすることをお勧めしますが、それらをバンドルする必要はありません。

あなたのコンポーネントにバンドルステップが何をしているのかを考えます。あなたのエントリーポイントを通過し、必要な依存関係を1つのファイルに取り込みます。これは、あなたのbundle.jsの結果があなたのコンポーネントから必要とされているすべての反応、反応dom、およびその他のものをすべて取得したことを意味します。

主なアプリケーション（コンポーネントパッケージを必要とする）のみがバンドルステップを必要とします。ここでは、入れ子にされたものを含むすべての依存関係を解決して、それらをアプリケーションのbundle.jsにまとめて、アプリケーションに反応が引き込まれたようなライブラリの複製コピーを作成しないようにします。