typescript - Storybook kompilerer ikke, når der bruges JSX-syntax i VUE

Jeg arbejder på en simpel vurdering, der kræver, at jeg bruger TypeScript og JSX-syntaks i VUE 2. Jeg skal også integrere Storybook for at teste mine UI-komponenter. Jeg kan køre tests med den simple templatesyntaks i VUE. Men hvis jeg bruger JSX-syntaks i en VUE-komponent og prøver at køre Storybook, får jeg følgende fejl.

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 (

Hvad jeg forstår indtil nu er, at dette er et problem med babel-loader, og jeg prøver at tilføje en webpack.config.js-fil i .storybook-mappen med følgende konfigurationer.

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

men jeg tror, det konfigurerer storybook med typescript i VUE, men ikke for JSX-syntaks. Jeg har brug for den rigtige loader og webpack-konfiguration til at bruge storybook i Vue med typescript og JSX. Jeg har fundet konfigurationen og babel-loader til React JSX-syntaks på et GitHub-forum, men kunne ikke finde en løsning til Vue js.

Github-forum, der kan være nyttigt https://github.com/storybookjs/storybook/issues/1493

Node-version: v16.5.0

VUE CLI version: @vue/cli 4.5.13

Udviklingsafhængigheder

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

Svar #1

Tilføjelse af "@vue/babel-preset-jsx" til din babel-konfigurationsfil ser ud til at løse dette problem.