紗線構建失敗 - （babel插件）錯誤：[BABEL]：找不到模塊'../buildMatchMemberExpression'

Question

賞金將在 4 天后到期。 此問題的答案有資格獲得+300聲望賞金。 Ludwig正在從有信譽的來源尋找答案。

我的倉庫中有一個模塊packages ，在那里我創建了一個新的 package，如下所示：

import React, { ReactElement, ReactNode } from 'react'
import styles from '../form-input/index.module.css'
import classNames from 'classnames'

interface Props extends React.HTMLProps<HTMLTextAreaElement> {
  help?: string
  icon?: ReactNode
  onClear?: () => void
}

export function FormTextarea(props: Props): ReactElement {
  const { help, icon, onClear, ...rest } = props

  return <textarea {...rest} className={classNames(styles.input, props.className)} />
}

當我嘗試通過運行yarn build構建packages模塊時，出現錯誤：

rpt2: options error TS5052: Option 'jsxFragmentFactory' cannot be specified without specifying option 'jsxFactory'.
(babel plugin) Error: [BABEL]: Cannot find module '../buildMatchMemberExpression'

這是模塊的package.json ：

{
  "name": "@mypackage/ui-components",
  "private": true,
  "version": "1.0.0",
  "sideEffects": false,
  "source": "src/index.ts",
  "main": "dist/index.js",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "rimraf --no-glob ./dist && microbundle --tsconfig ./tsconfig.build.json --css-modules true  -f cjs,es --no-compress",
    "build-master": "yarn build",
    "lint": "run-p lint:*",
    "typescript": "tsc",
    "lint:eslint": "eslint --max-warnings 0 src",
    "lint:prettier": "prettier --check src",
    "format": "prettier --write src",
    "ladle:start": "yarn ladle serve",
    "ladle:build": "yarn ladle build --base /my-frontend",
    "ladle:deploy": "yarn ladle:build && gh-pages -d build",
    "clean": "rimraf ./dist"
  },
  "dependencies": {
    "@headlessui/react": "^1.6.4",
    "@popperjs/core": "^2.11.6",
    "classnames": "^2.3.1",
    "date-fns": "^2.28.0",
    "react": "^17.0.2",
    "react-day-picker": "^8.0.6",
    "react-dom": "^17.0.2",
    "react-popper": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/plugin-proposal-class-properties": "^7.16.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-react-jsx-source": "^7.18.6",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.0",
    "@fortawesome/fontawesome-svg-core": "6.1.2",
    "@fortawesome/free-regular-svg-icons": "6.1.2",
    "@fortawesome/free-solid-svg-icons": "6.1.2",
    "@fortawesome/pro-regular-svg-icons": "6.1.2",
    "@fortawesome/pro-solid-svg-icons": "6.1.2",
    "@fortawesome/react-fontawesome": "0.2.0",
    "@glow/eslint-config": "*",
    "@ladle/react": "^2.1.2",
    "@types/react": "^17.0.17",
    "@types/react-dom": "^17.0.17",
    "@types/tailwindcss": "^3.0.4",
    "@typescript-eslint/eslint-plugin": "^5.33.0",
    "@typescript-eslint/parser": "^5.32.0",
    "babel-plugin-dynamic-import-node": "^2.3.3",
    "classnames": "^2.3.1",
    "eslint": "^8.21.0",
    "eslint-import-resolver-typescript": "^3.4.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jest": "^26.7.0",
    "eslint-plugin-react": "^7.29.3",
    "eslint-plugin-react-hooks": "^4.3.0",
    "gh-pages": "^4.0.0",
    "microbundle": "0.15.0",
    "postcss": "^8.4.11",
    "tailwind-styled-components": "2.1.7",
    "tailwindcss": "^3.0.24",
    "tslib": "^2.3.1",
    "typescript": "^4.7.4",
    "typescript-plugin-css-modules": "^3.4.0"
  }
}

我不確定為什么會出現此錯誤？ 我曾嘗試運行yarn nuke和yarn install ，但再次運行yarn build時出現同樣的錯誤。

Answer 1

您是否嘗試在您的compilerOptions jsxFactory設置為'h' ？

來自 TypeScript 官方文檔：

JSX 工廠更改使用經典 JSX 運行時編譯 JSX 元素時在.js文件中調用的 function。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "jsx": "react",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment"
  }
}