Nuxt.js+Storybook에서 JSX 기법을 트랜스파일할 수 없는 경우는 babel.config.js를 준비한다

Nuxt에서 jsx 기법을 사용하는 구성 요소가 Storybook에서 전송에 실패하는 문제가 발생했습니다.

재현 절차

먼저 nuxt 프로젝트를 만들고 Storybook을 소개합니다.

npx crete-nuxt-app storybooksample
cd storybooksample
npx sb init

그런 다음 Jsx를 사용하여 구성 요소를 만들고 이야기를 준비합니다.

stories/HelloJsx.vue

<script>
export default {
  render(h) {
    return <div>Hello</div>
  },
}
</script>

stories/HelloJsx.stories.js

import Hello from './HelloJsx.vue'

export default {
  title: 'Example/Hello',
  component: Hello,
  argTypes: {},
}

const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Hello },
  template: '<hello />',
})

export const MyHello = Template.bind({})

이 상태에서 yarn storybook를 실행하면 아래와 같은 오류가 발생합니다.

ERROR in ./stories/HelloJsx.vue?vue&type=script&lang=js& (./node_modules/vue-docgen-loader/lib??ref--12!./node_modules/babel-loader/lib??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./stories/HelloJsx.vue?vue&type=script&lang=js&) 3:11
Module parse failed: Unexpected token (3:11)
File was processed with these loaders:
 * ./node_modules/vue-docgen-loader/lib/index.js
 * ./node_modules/vue-docgen-loader/lib/index.js
 * ./node_modules/babel-loader/lib/index.js
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| export default {
|   render: function render(h) {
>     return <div>Hello</div>;
|   }
| };
 @ ./stories/HelloJsx.vue?vue&type=script&lang=js& 1:0-228 1:244-247 1:249-474 1:249-474
 @ ./stories/HelloJsx.vue
 @ ./stories/HelloJsx.stories.js
 @ ./stories sync ^\.(?:(?:^|[\\\/]|(?:(?:(?!(?:^|[\\\/])\.).)*?)[\\\/])(?!\.)(?=.)[^\\\/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./.storybook/generated-stories-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

해결

아래 파일을 프로젝트 바로 아래에 만듭니다. 이것은 @vue/cli에서 vue create storybooktest 로 프로젝트를 만들 때 만들어지는 것과 같은 내용입니다.

babel.config.js

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
}

이 모듈을 프로젝트에 추가합시다.

yarn add -D @vue/cli-plugin-babel

이제 괜찮습니다. Storybook을 살펴보자.

yarn storybook

잘 갔다.