Lerna/typescript/nextの共有コンポーネント.JSプロジェクト

xpost from my personal blog https://alexbh.dev/posts/2021-01-03-nextjs-lerna-common

あなたが私の最後のポストから見たかもしれないように、私はものを次へ移しています.JSとほとんど問題に走らないでください、それで、私はここに彼らについてブログを決めました.私が走った最新の問題は、Lerna Monorepoでアプリの間で一般的なtypescriptコンポーネントを共有していました.この設定は次のようになります.

packages/
  frontend/
  landing/
  ui/
  common/
  backend/

私がそれをしようとしていたものはui コンポーネント間frontend and landing プロジェクト.それは音として簡単ですので、私はそれだけで動作するように期待したが、いくつかのトリッキーなゴッチがあります.私の着陸ページはこの場合ですhttps://portabella.io 私のフロントエンドはhttps://app.portabella.io .

課題

ベースディレクトリ外でインポートできません
このエラーメッセージをよく見る?

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

問題は次の顔から生じる.JSはそのルートの外側から何もインポートできませんtsconfig.json baseUrl しかし、私はLernaで働く方法を得ることができませんでした.

複数反応版
反応の複数のバージョンで問題を持つ?このエラーがアプリケーションに存在する場合は読み込みを続行します.

hooks can only be called inside the body of a function component

コンパイルする必要があります.インポートする前に
私が持っていた最後の問題は、私は任意の.ts or .tsx しかし、私が私が探しているものであるmonorepoで、私は輸入したいです.

リンク
上記の問題に遭遇したならば、以下のリンクを見つけることができます.

https://github.com/martpie/next-transpile-modules

https://stackoverflow.com/questions/63668508/how-do-you-share-uncompiled-typescript-between-react-native-and-next-js-in-a-mon

https://github.com/vercel/next.js/issues/9474

https://www.grouparoo.com/blog/nextjs-plugins

これらの音のいずれかをおなじみの場合は運が良い!私は、それを働かせるのに十分なものをまとめることができました.

解決策

ピン反応版
最初のステップは、あなたのMonorepoで使用する反応版で解決することです.あなたが最新の次を使用しているならば.しかし、私のアプリケーションはまだ16です.を使用して更新をあなたのpackage.json ファイルです.

蒸散.TSと.TSXファイル
これを加えるnext.config.js 次に強制する.JSコンポーネントを転送する

config.module.rules.push({
  test: /\.tsx?|\.ts?$/,
  use: [options.defaultLoaders.babel],
});

正しい反応の実装を解決する
上記のWebPackの設定に加えてnext.config.js ファイル

config.resolve.alias['react'] = path.join(
  __dirname,
  '..',
  '..',
  'node_modules',
  'react'
);
config.resolve.alias['react-dom'] = path.resolve(
  __dirname,
  '..',
  '..',
  'node_modules',
  'react-dom'
);

私たちはこのケースで2つのディレクトリを立ち上げますnode_modules/ ディレクトリとフォルダ構造packages/ .
うまくいけばそれはあなたが持っていたすべての問題をクリア!次.JSはいくつかの素晴らしい機能を持っており、一般的にうまく動作しますが、このようなことを行うと、少しfinicky、うまくいけばサポートはすぐにアイロンアウトされます.