Zenn
🐈

【Next.js】 Module not found: Error: Can't resolve '@/~'が出た時の対応

2021/12/04に公開
Next.js
Storybook
tech

Next.jsを用いてStorybookを扱う際に Module not found: Error: Can't resolve '@/~' が出たのでその解決方法をまとめました。

原因

StorybookがNext jsの絶対インポートでパスを解決できないためにerrorが起こります。

例えば、以下のようなimportを書いたとします。

// Sample.tsx

import { HogeItem } from '@/components/atoms/HogeItem';

上記のようにpathに "@" をつけるとstorybookのwebpack設定を特に行なっていない場合、

Module not found: Error: Can't resolve '@/components/atoms/HogeItem' in '/Users/jhcoder/dev/sample/src/components/templates/Sample'

といったerrorがstorybook起動時に出てしまい、storybookを立ち上げることができません。

解決方法

'@/' 構文が webpack (webpackFinal のところ) に通知されないのが原因なのでエイリアス構成を渡し、'@/' のpath を認識させると良いです。

storybookの配下にあるmain.jsを変更します。

まず、module.exportsにwebpackFinalをはやしてあげます。webpackFinalはこのフィールドを設けることで、Storybookのwebpack設定をカスタマイズすることを可能にするものです。

コード例

// .storybook/main.js の例

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

        return {
            ...config,
            resolve: {
                ...config.resolve,
                alias: {
                    ...config.resolve.alias,
                    'next-i18next': 'react-i18next',
                },
            },
        };
    },
};

上記では "@/components" と "@/i18n" のpathを通しています。このようにすることでコンポーネントファイルにNext jsの絶対インポートを書いてもstorybookでerrorが出なくなります。

参考

https://storybook.js.org/docs/react/configure/webpack

Discussion