typescript - Storybook se ne kompajlira kada se koristi JSX sintaksa u VUE

Radim na jednostavnoj procjeni koja zahtijeva da koristim TypeScript i JSX sintaksu u VUE 2. Također trebam integrirati Storybook kako bih testirao svoje UI komponente. Uspijevam pokrenuti testove s jednostavnom predložak sintaksom VUE-a. Ali, ako koristim JSX sintaksu u VUE komponenti i pokušam pokrenuti Storybook, dobijem sljedeću pogrešku.

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 (

Koliko do sada razumijem, ovo je problem s babel-loaderom i pokušavam dodati datoteku webpack.config.js u .storybook mapu s sljedećim konfiguracijama.

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

ali mislim da konfigurira storybook s typescriptom u VUE-u, ali ne za JSX sintaksu. Trebam ispravan loader i webpack konfiguraciju za korištenje storybooka u Vue-u s typescriptom i JSX-om. Pronašao sam konfiguraciju i babel-loader za React JSX sintaksu na GitHub forumu, ali nisam mogao pronaći rješenje za Vue.js.

GitHub forum koji može biti koristan https://github.com/storybookjs/storybook/issues/1493

Verzija Nodea: v16.5.0

VUE CLI verzija: @vue/cli 4.5.13

Razvojne ovisnosti

"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"
  }

Odgovor #1

Dodavanje "@vue/babel-preset-jsx" u vašu Babel konfiguracijsku datoteku čini se da rješava ovaj problem.