typescript - 在 VUE 中使用 JSX 语法时，Storybook 无法编译

Question

我正在做一个简单的评估，需要我在 VUE 2 中使用 typescript 和 JSX 语法。我还需要集成故事书来测试我的 UI 组件。我能够使用 VUE 的简单模板语法运行测试。但是，如果我在 VUE 组件中使用 JSX 语法并尝试运行故事书，我会收到以下错误。

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 (

到目前为止，我了解到这是 babel-loader 的一个问题，我尝试在 .storybook 文件夹中添加一个 webpack.config.js 文件，并具有以下配置。

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

但我认为它确实在 VUE 中配置了带有打字稿的故事书，但不适用于 JSX 语法。我需要正确的加载器和 webpack 配置才能在 Vue 中使用带有 typescript 和 JSX 的故事书。我在 GitHub 论坛中找到了 React JSX 语法的配置和 babel-loader，但找不到 Vue js 的解决方案。

可能有用的 Github 论坛https://github.com/storybookjs/storybook/issues/1493

节点版本：v16.5.0

VUE CLI 版本：@vue/cli 4.5.13

开发依赖

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

标签： typescriptvue.jswebpackjsxstorybook