【Storybook(vue)】ERROR in ./stories/button.stories.js Module not found: Error: Can't resolve '@/components/atoms/Button.vue' in '/webapp/stories' のエラー解決策

問題

vueのStorybook上で、@（アットマーク）を使用したcomponentのインポートができない。

ERROR in ./stories/button.stories.js
Module not found: Error: Can't resolve '@/components/atoms/Button.vue' in '/webapp/stories'

解決策

storybookの webpack.config.js に記述

webpack.config.js

  config.resolve.alias['@'] = rootPath

これでいけるかと思ったが、dynamicImportの構文サポートは現在利用できませんエラーが出る。

Support for the experimental syntax 'dynamicImport' isn't currently enabled

そこで、.babelrcに以下のプラグインを記述する。

.babelrc

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

これでStorybook上で@を用いたコンポーネントのインポートができるようになる。