問題タブ [npm-link]

私は React コンポーネント ライブラリを作成しています。他のプロジェクトで使用したいのは、多くのオーバーヘッド (bit、create-react-library、generact など) や公開なしです。npm install ../shared_libのシンボリックリンクとしてプロジェクトに追加するために使用したいと思い/node_modulesます。このコマンドは、シンボリック リンクをプロジェクト node_modules に追加します。私のshared_libには、次のテストがexport defaultあり<div></div>ます：

私が直面している問題は、コンポーネントを作業中のプロジェクトにインポートするときの次のエラーです。

エラー：

shared_libjsx を使用してファイル以外から何かをインポートすると (文字列や関数など)、正常に動作します。

編集:アプリケーション webpack には、オブジェクトの symlinks prop が false に設定されている解決があります。

編集:以下の回答 ( https://stackoverflow.com/a/60980492/3006493 )のソリューションを適用した後、後で symlinks prop を true に戻しました。shared_libソリューションが機能してコンポーネントをレンダリングするために、false に設定する必要はありませんでした。

私のアプリのローダー:

編集:以下の回答のソリューションを適用すると、ローダーは次のようになります。

アプリの現在の .babelrc 設定 (.babelrc を削除して、同じ結果で package.json にプリセットを含めてみました):

**編集：以下の回答の解決策を適用した後、babelプリセットを元に戻すことになりましたpackage.json.

これに対する解決策を見つけるためにしばらく調査しましたが、どうやらwebpackにはシンボリックリンクされた反応コンポーネントのバンドルに問題がありますか? 私は create-react-app を使用していません。 それで、プロジェクトにインポートする前に、shared_lib をバンドルして、何が起こるかを確認しようとしました。これが最終的なwebpack構成です（他の構成も試しました）：

そして、shared_lib の package.json

パッケージはエラーなしでバンドルされています:

同じ方法でコンポーネントをインポートしようとすると:

console.log が返されますundefined。

私のアプリのライブラリファイルへのパスは問題ありshared_lib/dist/shared_lib.jsません.export default 1console.log(TryTest)App.js1

libraryTarget プロパティを に変更してみましshared_lib/webpack.configたlibraryTarget: 'commonjs'。の結果は にconsole.log(TryTest)なり{shared_lib: undefined}ます。

誰もこれに遭遇したことがありますか？

React プロジェクト間で共通のデータ オブジェクトまたはユーティリティ クラスを共有したいとします (ローカルのみ)。たとえば、複雑な文字列またはデータ構造の操作を実行するユーティリティ クラスです。

それを行う最良の方法はどれですか？ライブラリ用に別の NPM モジュールを作成し、それを各プロジェクトにリンクする必要がありますか?

を使用するいくつかのソリューションを見てきcreate-app-rewiredましたが、それらにはいくつかのカスタムが必要であり、getBabelLoaderそのような単純なユースケースには多すぎるようです。