StoryBookでエラーModule not found: Error: Can't resolveが出るとき

エラー内容

storybookでstart-storybook -p 6006 -s publicしようとしたら、ModuleNotFoundErrorが発生した.

$ npm run storybook
ModuleNotFoundError: Module not found: Error: Can't resolve '@Pages/LoginPage' in '...'

このエラーが発生したのは./webpack.config.jsに対して、絶対パス指定でimportできるよう修正をおこなう対応中だった。 (下記のresolveを追加していた)

const path = require('path');

module.exports = {
  ...
  resolve: {
    extensions: ['.js', '.ts', '.tsx'],
    alias: {
      '@Layouts': path.resolve(__dirname, 'src/Layouts'), 
      ...
    }
  }

原因

storybookは、./storybook/main.jsに設定ファイルを置いているが、ここからだとLayoutsディレクトリへのパスの相対位置がずれるから。
./storybookディレクトリに設定ファイルがあるから、もう一つ上のディレクトリを指定する必要がある。

対応

ファイル./storybook/main.jsに対して、webpackFinalの定義を追加する。
ここで、../src/とディレクトリの位置指定を１つ上にずらすとうまくいった。

const path = require("path");

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

Amazonでおトクに買い物する方法