【Create React App】他のプロジェクトのファイルをimportする

TypeScriptやJavaScriptなCreate React Appを使った環境で他のプロジェクトのファイルをimportしたい！

概要

今回の記事では、TypeScriptやJavaScriptなCreate React Appを使った開発環境で他のプロジェクトのファイルをimportする手順を掲載する。

npmとかでライブラリを作るまでもないプライベートな開発環境で別のプロジェクトのコンポーネントを単純に簡単にimportしたい！

仕様書

環境

typescript 5.2.2

手順書

Create React Appを使わない場合と使ってない場合の2部構成。

Create React Appを使わない場合

Create React Appを使わない場合はプロジェクトのルートにあるtsconfig.json（JavaScriptの場合はjsconfig.json）のcompilerOptionsの中でpathsにimportしたいファイルのあるパスを設定できる。

ディレクトリの構成が下記のようになってるとして

current_project
    src
    tsconfig.json
other_project
    src
        common.tsx

current_projectからother_projectのファイルをimportできるようにする例。

{
    "compilerOptions": {
        ...
        "baseUrl": "./src",
        "paths": {
            "@other/*": ["../../other_project/src/*"]
        }
    },
    ...
}

pathsのパスはbaseUrlのパスが起点になる。また、baseUrlの設定がないとpathsの設定は無視される。

importは下記のような感じでできる。

import {*} from '@other/common';

Create React Appを使う場合

んで、本題。

Create React Appを使う場合は、前述の方法ではエラーがでてしまう。
インターネットで調べるとシンボリックリンクを使うと良いという感じだったんだけども、Windows特有の現象なのかこれはこれでエラーが発生してしまう。

諦めてたんだけども、シンボリックリンクではなくジャンクションを使うとWindowsでもエラー無しで実行＆パブリッシュできた！

他のプロジェクトのcommonディレクトリをプロジェクト内のcommonにジャンクションを作る例。

MKLINK /J "src/common" "../../other_project/src/common"

ジャンクションは、ディレクトリ限定のシンボリックリンクみたいな感じ？ディレクトリに対してのシンボリックリンクも作れるんだけども、なぜかシンボリックリンクではエラーが出てしまう。

まとめ（感想文）

メインアプリ用のツール的なアプリを別のプロジェクトで作る場合とかに使えるかもね！

編集後記（2024-9-7）

ジャンクション経由の特定のファイルでModule parse failed: Unexpected tokenが発生してビルドできない。ビルドできるのもある。原因不明。調査中。