問題タブ [webpack-3]

React と Webpack (3.4.1) を使用して「コンポーネント ライブラリ」を構築しようとしています。アイデアは、 React Cosmosを使用して 1 つの React アプリを作成し、再利用可能なコンポーネントの「ライブラリ」をインタラクティブに構築して探索することです。そのリポジトリには、buildそれらのコンポーネントだけを (Github や NPM に) プッシュできるファイルにコンパイルするタスクもあります。また、そのファイル/パッケージを他のプロジェクトにインポートして、再利用可能なコンポーネントにアクセスできます。

注/更新- これを自分で試してみたい方のために、(機能しない) パッケージを NPM: https://www.npmjs.com/package/rs-componentsに公開しました。同じyarn add問題に遭遇する可能性が高いのは、プロジェクトだけです。

この作業の 90% が完了しました。React Cosmos はコンポーネントを正しく表示しており、ビルド タスク ( rimraf dist && webpack --display-error-details --config config/build.config.js) はエラーなしで実行されています。ただし、リポジトリを Github からパッケージとして別のプロジェクトにプルすると、エラーが発生します。

エラーは、Webpack がコンポーネント ライブラリの依存関係を正しくインポートしていないことが原因のようです。ビルド時にライブラリを縮小/マングルしないと、インポート時に最初に表示されるエラーは次のとおりです。

TypeError: React.Component is not a constructor

実際、デバッガーを投入して調べると、React は空のオブジェクトです。

node_modules(ごまかして) React をコンパイル済み/ダウンロード済みファイル( ) に直接インポートすることでこれを回避するとconst React = require('../../react/react.js')、そのエラーは発生しませんが、prop-typesライブラリのインポートの失敗に関連する同様のエラーが発生します。

TypeError: Cannot read property 'isRequired' of undefined

したがって、私のコードは正しく取り込まれているようですが、コンポーネント ライブラリ ファイルのインポートは正しくバンドルされていないようです。

関連ファイルのほとんどは次のとおりです。

config/build.config.js

コンポーネントの例:

Checkbox.js

また、Webpack ビルド タスクの「エントリ」ファイル ( webpack --config config/build.config.js) は、このパッケージをインポートするアプリケーションがアクセスできるコンポーネントのみをエクスポートすることを目的としています。

src/index.js

最後に、不適切に未定義のように見える変数を「インポート」している、コンパイルされた未醜化の JS の行を次に示します。

• var React = __webpack_require__(1);
• /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_prop_types__ = __webpack_require__(3);

これを整理するのに役立つものが他にあれば教えてください。非常に混乱しているので、助けていただければ幸いです。

ありがとう！

編集

多くのものが正しくインポートされているようです。コンパイルされたファイルでデバッガーをスローし、__webpack_require__(n)さまざまな を試してみると、nインポートされたさまざまなモジュールが表示されます。残念ながら、React と PropTypes はその中に含まれていないようです。

production フォルダに画像がありません。webpack config で問題を修正する簡単な方法はありますか?

package.json

webpack.config.js