typescript - VUE'de JSX sözdizimi kullanıldığında Storybook derlenmiyor

VUE 2'de TypeScript ve JSX sözdizimini kullanmamı gerektiren basit bir değerlendirme üzerinde çalışıyorum. Ayrıca UI bileşenlerimi test etmek için Storybook'u entegre etmem gerekiyor. VUE'nin basit şablon sözdizimi ile testleri çalıştırabiliyorum. Ancak, VUE bileşeninde JSX sözdizimini kullanıp Storybook'u çalıştırmaya çalışırsam aşağıdaki hatayı alıyorum.

ERROR in ./src/components/Home.tsx 59:16
Module parse failed: Unexpected token (59:16)
File was processed with these loaders:
 * ./node_modules/@storybook/vue/node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
|     },
|     render() {
>         return (<div class={styles.container}>
|         {this.dropdownStatus && (<div class={styles.containerDropdown}>
|             <div class={styles.popupBtnWrap}>
 @ ./src/stories/Home.stories.js 102:0-38 105:13-17 123:12-16
 @ ./src sync ^\.(?:(?:^|[\\/]|(?:(?:(?!(?:^|[\\/])\.).)*?)[\\/])(?!\.)(?=.)[^\\/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./.storybook/generated-stories-entry.js
 @ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/preview.js-generated-other-entry.js ./node_modules/storybook-addon-outline/dist/esm/preset/addDecorator.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (

Şimdiye kadar anladığım kadarıyla bunun babel-loader ile ilgili bir sorun olduğunu ve .storybook klasörüne aşağıdaki yapılandırmalarla bir webpack.config.js dosyası eklemeye çalıştığımı anlıyorum.

module.exports = {
  // ...
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.ts$/,
      loader: "ts-loader",
      options: { appendTsSuffixTo: [/\.vue$/] },
    });
    return config;
  },
};

ama bence bu, VUE'de storybook'u typescript ile yapılandırıyor ama JSX sözdizimi için değil. Vue'de typescript ve JSX ile storybook kullanmak için doğru loader ve webpack yapılandırmasına ihtiyacım var. React JSX sözdizimi için yapılandırmayı ve babel-loader'ı bir GitHub forumunda buldum ama Vue js için bir çözüm bulamadım.

Yararlı olabilecek Github forumu https://github.com/storybookjs/storybook/issues/1493

Node sürümü: v16.5.0

VUE CLI sürümü: @vue/cli 4.5.13

Geliştirici Bağımlılıkları

"devDependencies": {
    "@babel/core": "^7.14.6",
    "@storybook/addon-actions": "^6.3.4",
    "@storybook/addon-essentials": "^6.3.4",
    "@storybook/addon-links": "^6.3.4",
    "@storybook/vue": "^6.3.4",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "^4.5.13",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "@vue/test-utils": "^1.2.2",
    "babel-loader": "^8.2.2",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "mocha": "^8.4.0",
    "mochapack": "^2.1.2",
    "typescript": "~4.1.5",
    "vue-loader": "^15.9.7",
    "vue-template-compiler": "^2.6.11",
    "typed-css-modules": "^0.3.7",
    "babel-core": "7.0.0-bridge.0"
  }

Cevap #1

Babel yapılandırma dosyanıza "@vue/babel-preset-jsx" eklemek, bu sorunu çözüyormuş gibi görünüyor.