TypeScript + Gatsby + Storybook環境でimport aliasを利用する

モジュールを相対パスでimportするのが辛いので、エイリアスを設定しました。 ところが、複数の設定を変更する必要があり、思った以上に面倒だったので手順をメモ。

環境

• TypeScript 4.2.4
• Gatsby 3.2.1
• Storybook 6.2.5
• ESLint 7.24.0
• eslint-plugin-import 2.22.1

TypeScriptでの有効化

tsconfig.jsonを編集。パッケージのimportと混同しないよう、@をaliasとして指定しています。

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

Gatsbyでの有効化

さらに、Gatsbyの内部で動作しているWebpackの設定変更が必要です。gatsby-node.jsに下記の記述を追加しました。

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
      },
    },
  });
};

Storybookでの有効化

Storybookのバンドル設定はプロジェクトとは独立して存在するため、TypeScriptの絶対パスインポートを使う際はStorybook側のconfigmain.jsにも手を加える必要があります。下記のとおりconfig.resolve.aliasの設定を追加しました。

const path = require('path');

module.exports = {
  // ...
  webpackFinal: async (config) => {
    // ...
    config.resolve.alias = {
      ...config.resolve.alias,
      '@': path.resolve(__dirname, '../src'),
    };
    return config;
  },
};

ESLintでの有効化

以上の設定が行われていれば動作はしますが、まだeslint-plugin-importのimport/no-unresolvedで怒られます。 今回はeslint-import-resolver-typescriptを導入し、TypeScriptのalias設定を参照して解決するようにしました。 下記のとおりeslintrc.jsの設定を追加しました。

// ...
settings: {
  'import/resolver': {
    typescript: {
      alwaysTryTypes: true,
      project: './tsconfig.json',
    },
  },
}
// ...